luoye / littleApp_child

Download as
Browse Code »

Commit 93cac66c93b930d1d8b98d09976f771b81bdada3

Authored by luoye
2 parents a1a90f8da0 96cc983c78
Exists in master and in 2 other branches dev-wrh, dev_wjl

Merge branch 'master' of https://git.healthbaby.com.cn/luoye/littleapp_child 

* 'master' of https://git.healthbaby.com.cn/luoye/littleapp_child:
  知识列表详情优化
  育儿知识ui

Showing 15 changed files

littleApp_child/.js View file @ 93cac66
  1 +// .js
  2 +Page({
  3 +
  4 + /**
  5 + * 页面的初始数据
  6 + */
  7 + data: {
  8 +
  9 + },
  10 +
  11 + /**
  12 + * 生命周期函数--监听页面加载
  13 + */
  14 + onLoad: function (options) {
  15 +
  16 + },
  17 +
  18 + /**
  19 + * 生命周期函数--监听页面初次渲染完成
  20 + */
  21 + onReady: function () {
  22 +
  23 + },
  24 +
  25 + /**
  26 + * 生命周期函数--监听页面显示
  27 + */
  28 + onShow: function () {
  29 +
  30 + },
  31 +
  32 + /**
  33 + * 生命周期函数--监听页面隐藏
  34 + */
  35 + onHide: function () {
  36 +
  37 + },
  38 +
  39 + /**
  40 + * 生命周期函数--监听页面卸载
  41 + */
  42 + onUnload: function () {
  43 +
  44 + },
  45 +
  46 + /**
  47 + * 页面相关事件处理函数--监听用户下拉动作
  48 + */
  49 + onPullDownRefresh: function () {
  50 +
  51 + },
  52 +
  53 + /**
  54 + * 页面上拉触底事件的处理函数
  55 + */
  56 + onReachBottom: function () {
  57 +
  58 + },
  59 +
  60 + /**
  61 + * 用户点击右上角分享
  62 + */
  63 + onShareAppMessage: function () {
  64 +
  65 + }
  66 +})
littleApp_child/.json View file @ 93cac66
  1 +{}
littleApp_child/.wxml View file @ 93cac66
  1 +<!--.wxml-->
  2 +<text>.wxml</text>
littleApp_child/.wxss View file @ 93cac66
  1 +/* .wxss */
littleApp_child/app.json View file @ 93cac66
1 1 {
2 2 "pages": [
  3 + "pages/childcare_knowledge/childcare_knowledge",
3 4 "pages/home/home",
4 5 "pages/login/login",
5 6 "pages/inspectionReport/inspectionReport",
... ... @@ -11,7 +12,7 @@
11 12 "pages/hospitalDetail/hospitalDetail",
12 13 "pages/chatroom/chatroom",
13 14 "pages/chat/chat",
14   - "pages/childcare_knowledge/childcare_knowledge"
  15 + "pages/childcare_knowledge_detail/childcare_knowledge_detail"
15 16 ],
16 17 "window": {
17 18 "backgroundTextStyle": "light",
littleApp_child/pages/childcare_knowledge/childcare_knowledge.js View file @ 93cac66
... ... @@ -12,15 +12,23 @@
12 12  
13 13 Page({
14 14 data: {
15   - list:[],
  15 + list: [
  16 + {zar:12, title: "title1", content: "content1content1content1content1content1content1content1content1content1content1content1ds到场定损", image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" }
  17 + , { zar: 12, title: "title2", content: "content2", image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" }
  18 + , { zar: 12, title: "title2", content: "content2", image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" }
  19 + , { zar: 12,title: "title1", content: "content1", image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" }
  20 + , { zar: 12, title: "title2", content: "content2", image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg" }
  21 + , { zar: 12, title: "title2", content: "content2", image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" }
  22 + ],
16 23 images: [
17   - 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
18   - 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  24 + // 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  25 + // 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
19 26 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
20 27 ],
21 28 titles: ["日常护理", "营养美食", "疾病护理", "亲子互动", "言传qq"],
22 29 id:0,
23   - category:''
  30 + category:'',
  31 + current_index:0,
24 32 },
25 33 onLoad: function (e) {
26 34 this.data.id = e.id
... ... @@ -68,6 +76,9 @@
68 76 titleClick:function(e){
69 77 console.log(e)
70 78 var index = e.currentTarget.dataset.index
  79 + this.setData({
  80 + current_index:index
  81 + })
71 82 },
72 83 /*---------自定义函数--------*/
73 84 requestData(id){
littleApp_child/pages/childcare_knowledge/childcare_knowledge.json View file @ 93cac66
1 1 {
2   - "navigationBarBackgroundColor": "#f4879b",
  2 + "navigationBarBackgroundColor": "#48C17B ",
3 3 "navigationBarTitleText": "育儿知识",
4 4 "navigationBarTextStyle": "white",
5 5 "backgroundColor": "#d8dbd4"
littleApp_child/pages/childcare_knowledge/childcare_knowledge.wxml View file @ 93cac66
1 1 <!--articleLists.wxml 文章列表-->
2   -
3   -<view style="background:#ffffff;height:100%">
4   - <image class="search_img" src="../../source/imageSource/cancle_apport.png"></image>
  2 +<view class="title_top_view">
  3 + <image class="search_img" src="../../source/ic_search.png"></image>
5 4 <scroll-view class="title_scroll" scroll-x="true" scroll-y="false">
6   - <label class="scroll_title_label" wx:for="{{titles}}">
7   - <label style="font-size:12px" bindtap="titleClick" data-index="{{index}}">{{item}}</label>
  5 + <label class="scroll_title_label " wx:for="{{titles}}">
  6 + <label style="{{current_index == index? 'border-bottom: 2px solid #f4879b;' : 'border-bottom:0px solid #f4879b;'}}" class="title_text" bindtap="titleClick" data-index="{{index}}">{{item}}</label>
  7 +
8 8 </label>
9 9 </scroll-view>
10   - <swiper indicator-dots="true" indicator-active-color="#ffffff">
11   - <block wx:for="{{images}}">
12   - <swiper-item>
13   - <image src="{{item}}"></image>
14   - </swiper-item>
15   - </block>
16   - </swiper>
17   - <scroll-view scroll-y="true" style="height: 100%;" bindscroll="myScroll">
18   - <navigator url="../articleDetail/articleDetail?id={{item.id}}&category={{category}}&artIndex={{index}}" class="weui-media-box weui-media-box_appmsg home__list-item" hover-class="weui-cell_active" wx:for="{{list}}" wx:key="{{index}}">
19   - <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
20   - <image class="home__list__img" src="{{item.image.medium}}" mode="aspectFit" />
21   - </view>
22   - <view class="weui-media-box__bd weui-media-box__bd_in-appmsg home__list-item-content">
23   - <view class="home__list-item__right">
24   - <view class="weui-media-box__title home__list-item__title">{{item.title}}</view>
25   - <view class="home__list-item__like">
26   - <image class="home__list-item__title-like-icon" src="../../source/imageSource/page1_icon_dianzhan_n@3x.png" />
27   - <view class="home__list-item__title-like-count">{{item.likeCount ? item.likeCount : 0}}</view>
  10 +</view>
  11 +<view class="main">
  12 +
  13 + <view>
  14 + <swiper hidden="{{images.length > 0 ? false : true}}" class="swiper" indicator-dots="false" indicator-active-color="#ffffff">
  15 + <block wx:for="{{images}}">
  16 + <swiper-item>
  17 + <image src="{{item}}"></image>
  18 + </swiper-item>
  19 + </block>
  20 + </swiper>
  21 + <view>
  22 + <navigator url="../childcare_knowledge_detail/childcare_knowledge_detail" hover-class="weui-cell_active" wx:for="{{list}}" wx:key="{{index}}">
  23 + <view class="content_item">
  24 + <view style="margin-left:15px;margin-right:75px;">
  25 + <view class="content_title">{{item.title}}</view>
  26 + <view class="content_content">{{item.content}}</view>
  27 + <view class="zar_box">
  28 + <image class="zar_img" src="../../source/zar.png"></image>
  29 + <view class="content_zar">{{item.zar}}</view>
  30 + </view>
  31 +
28 32 </view>
  33 + <image class="content_image" src="{{item.image}}"></image>
29 34 </view>
30   - <view class="weui-media-box__desc" style="borth">{{item.introduction}}</view>
31   - </view>
32   - <view class="home__list-item__bottom"></view>
33   - </navigator>
34   - <view class="loadMoreView" wx:if="{{hasMore}}">加载更多...</view>
35   - </scroll-view>
  35 + <view class="home__list-item__bottom"></view>
  36 + </navigator>
  37 + <view class="loadMoreView" wx:if="{{hasMore}}">加载更多...</view>
  38 + </view>
  39 + </view>
  40 +
36 41 </view>
littleApp_child/pages/childcare_knowledge/childcare_knowledge.wxss View file @ 93cac66
  1 +.main {
  2 + background: #fff;
  3 + width: 100%;
  4 + margin-top: 40px;
  5 +}
  6 +
  7 +.title_top_view {
  8 + width: 100%;
  9 + display: flex;
  10 + background: white;
  11 + position: fixed;
  12 + height: 40px;
  13 + padding-left: 10px;
  14 + top: 0px;
  15 + z-index: 1;
  16 +}
  17 +
1 18 .title_scroll {
2   - width: 95%;
3   - margin-left: 40px;
4   - position: relative;
  19 + width: 90%;
  20 + margin-left: 10px;
5 21 /*可以滚动 */
6 22 white-space: nowrap;
7 23 display: inline-block;
8 24  
9 25  
... ... @@ -20,14 +36,23 @@
20 36 margin-right: 30px;
21 37 text-align: left;
22 38 line-height: 40px;
  39 + border: 1px;
  40 + font-size: 13px;
  41 + color: #494949;
  42 + border-bottom: 2px;
  43 + border-color: #FF5E5E ;
23 44 }
24 45  
  46 +.title_text {
  47 + font-size: 13px;
  48 + padding-top: 10px;
  49 + padding-bottom: 7px;
  50 +}
  51 +
25 52 .search_img {
26   - width: 20px;
27   - height: 20px;
28   - position: absolute;
29   - margin-top: 11px;
30   - margin-left: 10px;
  53 + width: 22px;
  54 + height: 22px;
  55 + margin-top: 9px;
31 56 }
32 57  
33 58 .home__list-item {
34 59  
35 60  
36 61  
37 62  
38 63  
39 64  
40 65  
41 66  
42 67  
43 68  
44 69  
45 70  
46 71  
47 72  
... ... @@ -35,86 +60,77 @@
35 60 background: white;
36 61 }
37 62  
38   -/*首页列表文章 item 的文章图片*/
  63 +.swiper {
  64 + height: 200px;
  65 + width: 100%;
  66 +}
39 67  
40   -.home__list__img {
41   - width: 80px;
  68 +.swiper image {
42 69 height: 100%;
43   - vertical-align: top;
44   - /*垂直居中*/
45   - display: flex;
46   - justify-content: center;
47   - align-items: Center;
  70 + width: 100%;
48 71 }
49 72  
50   -.home__list-item-content {
51   - margin-left: 15px;
52   -}
53   -
54   -/*首页列表文章 item 外层布局 右侧*/
55   -
56   -.home__list-item__right {
  73 +.content_item {
57 74 width: 100%;
58   - height: 32px;
59   - /*background: darkcyan;*/
60   - position: relative;
  75 + height: 75px;
  76 + right: 75px;
61 77 }
62 78  
63   -/*首页列表文章 item 内的title 布局*/
64   -
65   -.home__list-item__title {
66   - position: absolute;
67   - top: 0px;
68   - left: 0px;
69   - right: 60px;
  79 +.content_title {
  80 + font-family: PingFangSC-Regular;
70 81 font-size: 14px;
71   - color: #5e5e5e;
72   - font: normal;
  82 + margin-top: 10px;
  83 + color: #222;
  84 + display: -webkit-box;
  85 + -webkit-box-orient: vertical;
  86 + -webkit-line-clamp: 2;
  87 + overflow: hidden;
73 88 }
74 89  
75   -/*首页列表文章 item 内的的点赞 布局*/
76   -
77   -.home__list-item__like {
78   - position: absolute;
79   - top: 0px;
80   - right: 0px;
81   - /*垂直居中
82   - display: flex;
83   - justify-content:center;
84   - align-items:Center;*/
  90 +.content_content {
  91 + height: 36px;
  92 + font-family: PingFangSC-Regular;
  93 + font-size: 12px;
  94 + color: #888;
  95 + line-height: 18px;
  96 + display: -webkit-box;
  97 + overflow: hidden;
  98 + text-overflow: ellipsis;
  99 + word-break: break-all;
  100 + -webkit-box-orient: vertical;
  101 + -webkit-line-clamp: 2;
85 102 }
86 103  
87   -/*首页列表文章 item 内的点赞手图标*/
88 104  
89   -.home__list-item__title-like-icon {
90   - position: absolute;
91   - width: 10px;
92   - height: 10px;
93   - right: 0px;
94   - left: 0px;
95   - top: 7px;
96   -}
97 105  
98   -/*首页列表文章 item 内的的点赞 数*/
99   -
100   -.home__list-item__title-like-count {
101   - /*这个宽度设置后可以变化点赞数整个布局的位置前移后移*/
102   - width: 30px;
103   - margin-left: 15px;
  106 +.content_image {
  107 + width: 50px;
  108 + transform: translateY(-65px);
  109 + float: right;
  110 + margin-right: 15px;
  111 + height: 50px;
  112 +}
  113 +.zar_box{
  114 + display: flex;
  115 +}
  116 +.zar_img{
  117 + width: 22px;
  118 + height: 22px;
  119 +}
  120 +.content_zar {
  121 + font-family: PingFangSC-Regular;
104 122 font-size: 10px;
105   - margin-top: 4px;
106   - color: #c8c6c6;
107   - overflow: hidden;
108   - text-overflow: ellipsis;
  123 + margin-left: 3px;
  124 + margin-top: 3px;
  125 + color: #c6c6c6;
109 126 }
110   -
111 127 /*item 分割线*/
112 128  
113 129 .home__list-item__bottom {
114   - position: absolute;
115   - height: 1rpx;
  130 + height: 2px;
116 131 background: #d8dbd4;
117   - top: 0px;
  132 + margin-bottom: 5px;
  133 + margin-top: 5px;
118 134 left: 15px;
119 135 right: 15px;
120 136 }
littleApp_child/pages/childcare_knowledge_detail/childcare_knowledge_detail.js View file @ 93cac66
  1 +//articleLists.js 文章列表
  2 +// 网络请求工具类
  3 +var networkUtil = require('../../utils/network_util.js')
  4 +var api = require('../../utils/apiFile.js')
  5 +// 事件监听
  6 +var event = require('../../utils/event.js')
  7 +var page
  8 +// 是否有更多
  9 +var hasMore
  10 +var isRefresh
  11 +
  12 +
  13 +Page({
  14 + data: {
  15 +
  16 + knowledge: {time:"2017-8-7", zar: 12, title: "title1", content: "content1content1content1content1content1content1content1content1content1content1content1ds到场定损", image: "http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg" },
  17 + images: [
  18 + 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
  19 + 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
  20 + 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
  21 + ],
  22 + titles: ["日常护理", "营养美食", "疾病护理", "亲子互动", "言传qq"],
  23 + id:0,
  24 + category:'',
  25 + current_index:0,
  26 + },
  27 + onLoad: function (e) {
  28 + this.data.id = e.id
  29 + this.data.category = e.category
  30 + // 数据初始化
  31 + page = 1
  32 + hasMore = true
  33 + isRefresh = false
  34 +
  35 + // this.requestData()
  36 +
  37 +
  38 + },
  39 + onUnload: function() {
  40 +
  41 + },
  42 + /*---------事件处理函数--------*/
  43 + bindViewTap: function() {
  44 + wx.navigateTo({
  45 + url: '../home/home'
  46 + })
  47 + },
  48 + // 加载更多
  49 + loadMore:function(e){
  50 + if(!hasMore || isRefresh == true){
  51 + return
  52 + }
  53 + page ++
  54 +
  55 + this.requestData()
  56 +
  57 + },
  58 + // 下拉刷新回调接口
  59 + onPullDownRefresh: function() {
  60 + page = 1;
  61 + hasMore = true
  62 + // 网络请求，重新请求一遍数据
  63 + this.requestData();
  64 + },
  65 + myScroll:function(e){
  66 + if(e.detail.scrollTop >= e.detail.scrollHeight-wx.getSystemInfoSync().windowHeight - 3){
  67 + this.loadMore()
  68 + }
  69 + },
  70 + titleClick:function(e){
  71 + console.log(e)
  72 + var index = e.currentTarget.dataset.index
  73 + this.setData({
  74 + current_index:index
  75 + })
  76 + },
  77 + /*---------自定义函数--------*/
  78 + requestData(id){
  79 + var self = this
  80 + isRefresh = true
  81 + networkUtil.showLoading()
  82 + var param = {page:page,limit:15,type:getApp().globalData.userInfo.status,categoryId:self.data.id}
  83 + networkUtil._get(api.articleList,param,function(res){
  84 +
  85 + isRefresh = false
  86 + var arr = []
  87 + if(page > 0) {// 加载更多模式
  88 + arr = self.data.list
  89 + }
  90 + if(res.data.data.length < 15){
  91 + hasMore = false
  92 + }
  93 + arr = arr.concat(res.data.data)
  94 + var temp = self.data.category
  95 + self.setData({
  96 + list:arr,
  97 + hasMore : hasMore,
  98 + category : temp
  99 + })
  100 + },function(res){
  101 + isRefresh = false
  102 + })
  103 + },
  104 +
  105 +
  106 +})
littleApp_child/pages/childcare_knowledge_detail/childcare_knowledge_detail.json View file @ 93cac66
  1 +{
  2 + "navigationBarBackgroundColor": "#48C17B ",
  3 + "navigationBarTitleText": "文章详情",
  4 + "navigationBarTextStyle": "white",
  5 + "backgroundColor": "#d8dbd4"
  6 +}
littleApp_child/pages/childcare_knowledge_detail/childcare_knowledge_detail.wxml View file @ 93cac66
  1 +<view class="main">
  2 + <view class="title_text">{{knowledge.title}}</view>
  3 +
  4 + <view class="zar_box" style="margin-left:8px;">
  5 + <view class="zar_box">
  6 + <image class="zar_img" src="../../source/zar.png"></image>
  7 + <view class="content_zar">{{knowledge.zar}}</view>
  8 + </view>
  9 + <view class="content_time">{{knowledge.time}}</view>
  10 + </view>
  11 +
  12 + <swiper hidden="{{images.length > 0 ? false : true}}" class="swiper" indicator-dots="true" indicator-active-color="#ffffff">
  13 + <block wx:for="{{images}}">
  14 + <swiper-item>
  15 + <image src="{{item}}"></image>
  16 + </swiper-item>
  17 + </block>
  18 + </swiper>
  19 + <text class="content_content">{{knowledge.content}}</text>
  20 +</view>
littleApp_child/pages/childcare_knowledge_detail/childcare_knowledge_detail.wxss View file @ 93cac66
  1 +.main {
  2 + background: #fff;
  3 + width: 100%;
  4 + height: 100%;
  5 +}
  6 +
  7 +.title_text {
  8 + padding-top: 10px;
  9 + font-family: PingFangSC-Regular;
  10 + font-size: 16px;
  11 + color: #000;
  12 + letter-spacing: 0;
  13 + margin-left: 10px;
  14 + margin-right: 10px;
  15 +}
  16 +
  17 +.home__list-item {
  18 + position: relative;
  19 + background: white;
  20 +}
  21 +
  22 +.swiper {
  23 + height: 160px;
  24 + margin-top: 10px;
  25 + width: 100%;
  26 +}
  27 +
  28 +.swiper image {
  29 + height: 100%;
  30 + width: 100%;
  31 +}
  32 +
  33 +.content_item {
  34 + width: 100%;
  35 + height: 75px;
  36 + right: 75px;
  37 +}
  38 +
  39 +.content_time {
  40 + font-family: PingFangSC-Regular;
  41 + font-size: 10px;
  42 + margin-top: 3px;
  43 + color: #c8c6c6;
  44 + display: -webkit-box;
  45 + -webkit-box-orient: vertical;
  46 + -webkit-line-clamp: 2;
  47 + margin-left: 20px;
  48 + overflow: hidden;
  49 +}
  50 +
  51 +.content_content {
  52 + font-family: PingFangSC-Regular;
  53 + font-size: 13px;
  54 + color: #888;
  55 + display: flex;
  56 + margin-top: 15px;
  57 + margin-left: 15px;
  58 + margin-right: 15px;
  59 + word-break: break-all;
  60 + text-indent:2em;
  61 +}
  62 +
  63 +.content_image {
  64 + width: 50px;
  65 + transform: translateY(-65px);
  66 + float: right;
  67 + margin-right: 15px;
  68 + height: 50px;
  69 +}
  70 +
  71 +.zar_box {
  72 + display: flex;
  73 +}
  74 +
  75 +.zar_img {
  76 + width: 22px;
  77 + height: 22px;
  78 +}
  79 +
  80 +.content_zar {
  81 + font-family: PingFangSC-Regular;
  82 + font-size: 10px;
  83 + margin-left: 3px;
  84 +
  85 + margin-top: 3px;
  86 + color: #c8c6c6;
  87 +}
  88 +
  89 +/*item 分割线*/
  90 +
  91 +.home__list-item__bottom {
  92 + height: 2px;
  93 + background: #d8dbd4;
  94 + margin-bottom: 5px;
  95 + margin-top: 5px;
  96 + left: 15px;
  97 + right: 15px;
  98 +}
littleApp_child/source/ic_search.png View file @ 93cac66

1.28 KB
littleApp_child/source/zar.png View file @ 93cac66

711 Bytes