luoye / littleApp_child

Commit 96cc983c789849f90021cb4b99eb29d4e1f16aa6

Authored by xianghenggang almost 8 years ago

Exists in master and in 2 other branches

知识列表详情优化

Showing 14 changed files with 337 additions and 21 deletions

littleApp_child/.js
littleApp_child/.json
littleApp_child/.wxml
littleApp_child/.wxss
littleApp_child/app.json
littleApp_child/pages/childcare_knowledge/childcare_knowledge.js
littleApp_child/pages/childcare_knowledge/childcare_knowledge.wxml
littleApp_child/pages/childcare_knowledge/childcare_knowledge.wxss
littleApp_child/pages/childcare_knowledge_detail/childcare_knowledge_detail.js
littleApp_child/pages/childcare_knowledge_detail/childcare_knowledge_detail.json
littleApp_child/pages/childcare_knowledge_detail/childcare_knowledge_detail.wxml
littleApp_child/pages/childcare_knowledge_detail/childcare_knowledge_detail.wxss
littleApp_child/source/ic_search.png
littleApp_child/source/zar.png

	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	+})

+{}

	1	+<!--.wxml-->
	2	+<text>.wxml</text>

+/* .wxss */

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",

...	...	@@ -21,8 +21,8 @@
21	21	, { zar: 12, title: "title2", content: "content2", image: "http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg" }
22	22	],
23	23	images: [
24		- 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
25		- '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',
26	26	'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
27	27	],
28	28	titles: ["日常护理", "营养美食", "疾病护理", "亲子互动", "言传qq"],

1	1	<!--articleLists.wxml 文章列表-->
2	2	<view class="title_top_view">
3		- <image class="search_img" src="../../source/imageSource/cancle_apport.png"></image>
	3	+ <image class="search_img" src="../../source/ic_search.png"></image>
4	4	<scroll-view class="title_scroll" scroll-x="true" scroll-y="false">
5	5	<label class="scroll_title_label " wx:for="{{titles}}">
6	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>
...	...	@@ -11,7 +11,7 @@
11	11	<view class="main">
12	12
13	13	<view>
14		- <swiper class="swiper" indicator-dots="true" indicator-active-color="#ffffff">
	14	+ <swiper hidden="{{images.length > 0 ? false : true}}" class="swiper" indicator-dots="false" indicator-active-color="#ffffff">
15	15	<block wx:for="{{images}}">
16	16	<swiper-item>
17	17	<image src="{{item}}"></image>
18	18
19	19
...	...	@@ -19,12 +19,16 @@
19	19	</block>
20	20	</swiper>
21	21	<view>
22		- <navigator url="" hover-class="weui-cell_active" wx:for="{{list}}" wx:key="{{index}}">
	22	+ <navigator url="../childcare_knowledge_detail/childcare_knowledge_detail" hover-class="weui-cell_active" wx:for="{{list}}" wx:key="{{index}}">
23	23	<view class="content_item">
24		- <view style="margin-left:20px;margin-right:75px;">
	24	+ <view style="margin-left:15px;margin-right:75px;">
25	25	<view class="content_title">{{item.title}}</view>
26	26	<view class="content_content">{{item.content}}</view>
27		- <view class="content_zar">{{item.zar}}</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>
29	33	<image class="content_image" src="{{item.image}}"></image>
30	34	</view>

1	1	.main {
2	2	background: #fff;
3	3	width: 100%;
4		- margin-top: 50px;
	4	+ margin-top: 40px;
5	5	}
6	6
7	7	.title_top_view {
8	8
...	...	@@ -9,14 +9,15 @@
9	9	display: flex;
10	10	background: white;
11	11	position: fixed;
12		- height: 50px;
	12	+ height: 40px;
	13	+ padding-left: 10px;
13	14	top: 0px;
14	15	z-index: 1;
15	16	}
16	17
17	18	.title_scroll {
18	19	width: 90%;
19		- margin-left: 20px;
	20	+ margin-left: 10px;
20	21	/可以滚动 /
21	22	white-space: nowrap;
22	23	display: inline-block;
...	...	@@ -36,6 +37,8 @@
36	37	text-align: left;
37	38	line-height: 40px;
38	39	border: 1px;
	40	+ font-size: 13px;
	41	+ color: #494949;
39	42	border-bottom: 2px;
40	43	border-color: #FF5E5E ;
41	44	}
...	...	@@ -47,10 +50,9 @@
47	50	}
48	51
49	52	.search_img {
50		- width: 20px;
51		- height: 20px;
52		- margin-top: 11px;
53		- margin-left: 10px;
	53	+ width: 22px;
	54	+ height: 22px;
	55	+ margin-top: 9px;
54	56	}
55	57
56	58	.home__list-item {
57	59
...	...	@@ -99,12 +101,8 @@
99	101	-webkit-line-clamp: 2;
100	102	}
101	103
102		-.content_zar {
103		- font-family: PingFangSC-Regular;
104		- font-size: 10px;
105		- color: #c6c6c6;
106		-}
107	104
	105	+
108	106	.content_image {
109	107	width: 50px;
110	108	transform: translateY(-65px);
...	...	@@ -112,7 +110,20 @@
112	110	margin-right: 15px;
113	111	height: 50px;
114	112	}
115		-
	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;
	122	+ font-size: 10px;
	123	+ margin-left: 3px;
	124	+ margin-top: 3px;
	125	+ color: #c6c6c6;
	126	+}
116	127	/item 分割线/
117	128
118	129	.home__list-item__bottom {

	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	+})

	1	+{
	2	+ "navigationBarBackgroundColor": "#48C17B ",
	3	+ "navigationBarTitleText": "文章详情",
	4	+ "navigationBarTextStyle": "white",
	5	+ "backgroundColor": "#d8dbd4"
	6	+}

	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>

	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	+}

1.28 KB

711 Bytes