luoye / littleApp_child

Download as
Browse Code »

Commit ed3bea6ecfdd1623cb6fc082aca100ba44ca9378

Authored by xianghenggang
1 parent bea2717566
Exists in master and in 2 other branches dev-wrh, dev_wjl

育儿知识ui

Showing 4 changed files with 112 additions and 95 deletions

littleApp_child/pages/childcare_knowledge/childcare_knowledge.js View file @ ed3bea6
... ... @@ -12,7 +12,14 @@
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 24 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
18 25 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
... ... @@ -20,7 +27,8 @@
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 @ ed3bea6
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 @ ed3bea6
1 1 <!--articleLists.wxml 文章列表-->
2   -
3   -<view style="background:#ffffff;height:100%">
  2 +<view class="title_top_view">
4 3 <image class="search_img" src="../../source/imageSource/cancle_apport.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 class="swiper" indicator-dots="true" 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="" hover-class="weui-cell_active" wx:for="{{list}}" wx:key="{{index}}">
  23 + <view class="content_item">
  24 + <view style="margin-left:20px;margin-right:75px;">
  25 + <view class="content_title">{{item.title}}</view>
  26 + <view class="content_content">{{item.content}}</view>
  27 + <view class="content_zar">{{item.zar}}</view>
28 28 </view>
  29 + <image class="content_image" src="{{item.image}}"></image>
29 30 </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>
  31 + <view class="home__list-item__bottom"></view>
  32 + </navigator>
  33 + <view class="loadMoreView" wx:if="{{hasMore}}">加载更多...</view>
  34 + </view>
  35 + </view>
  36 +
36 37 </view>
littleApp_child/pages/childcare_knowledge/childcare_knowledge.wxss View file @ ed3bea6
  1 +.main {
  2 + background: #fff;
  3 + width: 100%;
  4 + margin-top: 50px;
  5 +}
  6 +
  7 +.title_top_view {
  8 + width: 100%;
  9 + display: flex;
  10 + background: white;
  11 + position: fixed;
  12 + height: 50px;
  13 + top: 0px;
  14 + z-index: 1;
  15 +}
  16 +
1 17 .title_scroll {
2   - width: 95%;
3   - margin-left: 40px;
4   - position: relative;
  18 + width: 90%;
  19 + margin-left: 20px;
5 20 /*可以滚动 */
6 21 white-space: nowrap;
7 22 display: inline-block;
8 23  
9 24  
... ... @@ -20,12 +35,20 @@
20 35 margin-right: 30px;
21 36 text-align: left;
22 37 line-height: 40px;
  38 + border: 1px;
  39 + border-bottom: 2px;
  40 + border-color: #FF5E5E ;
23 41 }
24 42  
  43 +.title_text {
  44 + font-size: 13px;
  45 + padding-top: 10px;
  46 + padding-bottom: 7px;
  47 +}
  48 +
25 49 .search_img {
26 50 width: 20px;
27 51 height: 20px;
28   - position: absolute;
29 52 margin-top: 11px;
30 53 margin-left: 10px;
31 54 }
32 55  
33 56  
34 57  
35 58  
36 59  
37 60  
38 61  
39 62  
40 63  
41 64  
42 65  
... ... @@ -35,86 +58,68 @@
35 58 background: white;
36 59 }
37 60  
38   -/*首页列表文章 item 的文章图片*/
  61 +.swiper {
  62 + height: 200px;
  63 + width: 100%;
  64 +}
39 65  
40   -.home__list__img {
41   - width: 80px;
  66 +.swiper image {
42 67 height: 100%;
43   - vertical-align: top;
44   - /*垂直居中*/
45   - display: flex;
46   - justify-content: center;
47   - align-items: Center;
  68 + width: 100%;
48 69 }
49 70  
50   -.home__list-item-content {
51   - margin-left: 15px;
52   -}
53   -
54   -/*首页列表文章 item 外层布局 右侧*/
55   -
56   -.home__list-item__right {
  71 +.content_item {
57 72 width: 100%;
58   - height: 32px;
59   - /*background: darkcyan;*/
60   - position: relative;
  73 + height: 75px;
  74 + right: 75px;
61 75 }
62 76  
63   -/*首页列表文章 item 内的title 布局*/
64   -
65   -.home__list-item__title {
66   - position: absolute;
67   - top: 0px;
68   - left: 0px;
69   - right: 60px;
  77 +.content_title {
  78 + font-family: PingFangSC-Regular;
70 79 font-size: 14px;
71   - color: #5e5e5e;
72   - font: normal;
  80 + margin-top: 10px;
  81 + color: #222;
  82 + display: -webkit-box;
  83 + -webkit-box-orient: vertical;
  84 + -webkit-line-clamp: 2;
  85 + overflow: hidden;
73 86 }
74 87  
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;*/
  88 +.content_content {
  89 + height: 36px;
  90 + font-family: PingFangSC-Regular;
  91 + font-size: 12px;
  92 + color: #888;
  93 + line-height: 18px;
  94 + display: -webkit-box;
  95 + overflow: hidden;
  96 + text-overflow: ellipsis;
  97 + word-break: break-all;
  98 + -webkit-box-orient: vertical;
  99 + -webkit-line-clamp: 2;
85 100 }
86 101  
87   -/*首页列表文章 item 内的点赞手图标*/
88   -
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;
  102 +.content_zar {
  103 + font-family: PingFangSC-Regular;
  104 + font-size: 10px;
  105 + color: #c6c6c6;
96 106 }
97 107  
98   -/*首页列表文章 item 内的的点赞 数*/
99   -
100   -.home__list-item__title-like-count {
101   - /*这个宽度设置后可以变化点赞数整个布局的位置前移后移*/
102   - width: 30px;
103   - margin-left: 15px;
104   - font-size: 10px;
105   - margin-top: 4px;
106   - color: #c8c6c6;
107   - overflow: hidden;
108   - text-overflow: ellipsis;
  108 +.content_image {
  109 + width: 50px;
  110 + transform: translateY(-65px);
  111 + float: right;
  112 + margin-right: 15px;
  113 + height: 50px;
109 114 }
110 115  
111 116 /*item 分割线*/
112 117  
113 118 .home__list-item__bottom {
114   - position: absolute;
115   - height: 1rpx;
  119 + height: 2px;
116 120 background: #d8dbd4;
117   - top: 0px;
  121 + margin-bottom: 5px;
  122 + margin-top: 5px;
118 123 left: 15px;
119 124 right: 15px;
120 125 }