index.wxml
<scroll-view scroll-y="true" class="container" bindscrolltoupper="upper" upper-threshold="10" lower-threshold="5" bindscrolltolower="lower" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view class="search flex-wrp">
<view class="search-left flex-item">
<image src="../../images/search.png"></image>
<input placeholder="搜索话题, 问题或人" placeholder-class="search-placeholder"/>
</view>
<view class="search-right flex-item" bindtap="upper">
<image src="../../images/lighting.png"></image>
</view>
</view>
<block wx:for="{{feed}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
<view class="feed-item">
<view class="feed-source">
<a class="">
<view class="avatar">
<image src="{{item.feed_source_img}}"></image>
</view>
<text>{{item.feed_source_name}}{{item.feed_source_txt}}</text>
</a>
<image class="item-more" mode="aspectFit" src="../../images/more.png"></image>
</view>
<view class="feed-content">
<view class="question" qid="{{question_id}}" bindtap="bindQueTap">
<a class="question-link">
<text>{{item.question}}</text>
</a>
</view>
<view class="answer-body">
<view bindtap="bindItemTap">
<text class="answer-txt" aid="{{answer_id}}">{{item.answer_ctnt}}</text>
</view>
<view class="answer-actions" bindtap="bindItemTap">
<view class="like dot">
<a>{{item.good_num}} 赞同 </a>
</view>
<view class="comments dot">
<a>{{item.comment_num}} 评论 </a>
</view>
<view class="follow-it">
<a>关注问题</a>
</view>
</view>
</view>
</view>
</view>
</block>
</scroll-view>
index.js
//index.js
var util = require('../../utils/util.js')
var app = getApp()
Page({
data: {
feed: [],
feed_length: 0
},
//事件处理函数
bindItemTap: function() {
wx.navigateTo({
url: '../answer/answer'
})
},
bindQueTap: function() {
wx.navigateTo({
url: '../question/question'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
this.getData();
},
upper: function () {
wx.showNavigationBarLoading()
this.refresh();
console.log("upper");
setTimeout(function(){wx.hideNavigationBarLoading();wx.stopPullDownRefresh();}, 2000);
},
lower: function (e) {
wx.showNavigationBarLoading();
var that = this;
setTimeout(function(){wx.hideNavigationBarLoading();that.nextLoad();}, 1000);
console.log("lower")
},
//scroll: function (e) {
// console.log("scroll")
//},
//网络请求数据, 实现首页刷新
refresh0: function(){
var index_api = '';
util.getData(index_api)
.then(function(data){
//this.setData({
//
//});
console.log(data);
});
},
//使用本地 fake 数据实现刷新效果
getData: function(){
var feed = util.getData2();
console.log("loaddata");
var feed_data = feed.data;
this.setData({
feed:feed_data,
feed_length: feed_data.length
});
},
refresh: function(){
wx.showToast({
title: '刷新中',
icon: 'loading',
duration: 3000
});
var feed = util.getData2();
console.log("loaddata");
var feed_data = feed.data;
this.setData({
feed:feed_data,
feed_length: feed_data.length
});
setTimeout(function(){
wx.showToast({
title: '刷新成功',
icon: 'success',
duration: 2000
})
},3000)
},
//使用本地 fake 数据实现继续加载效果
nextLoad: function(){
wx.showToast({
title: '加载中',
icon: 'loading',
duration: 4000
})
var next = util.getNext();
console.log("continueload");
var next_data = next.data;
this.setData({
feed: this.data.feed.concat(next_data),
feed_length: this.data.feed_length + next_data.length
});
setTimeout(function(){
wx.showToast({
title: '加载成功',
icon: 'success',
duration: 2000
})
},3000)
}
})
index.wxss
/**index.wxss**/
.container{
height: 1500rpx;
}
.container .search{
width: 735rpx;
height: 65rpx;
padding: 12.5rpx 0 12.5rpx 15rpx;
background: #2A8CE5;
}
.container .search-left{
flex: 8;
background: #4EA3E7;
text-align: left;
}
.container .search-left input{
display: inline-block;
height: 65rpx;
font-size: 26rpx;
}
.search-placeholder{
color: #8CCEFD;
line-height: 20rpx;
}
.container .search .search-left image{
display: inline-block;
width: 35rpx;
height: 35rpx;
padding: 15rpx 15rpx 15rpx 20rpx;
}
.container .search .search-right{
flex: 1;
}
.container .search .search-right image{
width: 45rpx;
height: 45rpx;
padding: 10rpx;
}
.container{
padding: 0;
font-size: 14rpx;
background: #F0F4F3;
color: #000;
}
/*feed-item part is in app.wxss for multiplexing*/
utils.js
function formatTime(date) {
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function formatNumber(n) {
n = n.toString()
return n[1] ? n : '0' + n
}
module.exports = {
formatTime: formatTime
};
var index = require('../data/data_index.js')
var index_next = require('../data/data_index_next.js')
var discovery = require('../data/data_discovery.js')
var discovery_next = require('../data/data_discovery_next.js')
function getData(url){
return new Promise(function(resolve, reject){
wx.request({
url: url,
data: {},
header: {
//'Content-Type': 'application/json'
},
success: function(res) {
console.log("success")
resolve(res)
},
fail: function (res) {
reject(res)
console.log("failed")
}
})
})
}
function getData2(){
return index.index;
}
function getNext(){
return index_next.next;
}
function getDiscovery(){
return discovery.discovery;
}
function discoveryNext(){
return discovery_next.next;
}
module.exports.getData = getData;
module.exports.getData2 = getData2;
module.exports.getNext = getNext;
module.exports.getDiscovery = getDiscovery;
module.exports.discoveryNext = discoveryNext;
json
/**
* Created by Rebecca_Han on 16/10/27.
*/
module.exports={
};
var next = {
"id": 2,
"data": [
{
"question_id": 9,
"answer_id": 61,
"feed_source_id": 25,
"feed_source_name": "George",
"feed_source_txt": "赞了回答9",
"feed_source_img": "../../images/icon9.jpeg",
"question": "气象铁塔的辐射大吗?",
"answer_ctnt": "我不知道那个铁塔的情况,不过气象铁塔上会有一些测太阳辐射的设备,如果说辐射的话,太阳辐射那么多,大家赶紧躲进地底下呀~~~~~要不然辐射量这么大,会变异的呀~~~~",
"good_num": "112",
"comment_num": "18"
},
{
"question_id": 10,
"answer_id": 3,
"feed_source_id": 23,
"feed_source_name": "Rebecca",
"feed_source_txt": "赞了回答10",
"feed_source_img": "../../images/icon1.jpeg",
"question": "选择 Kindle 而不是纸质书的原因是什么?",
"answer_ctnt": "难道不明白纸质书更贵啊!!! 若觉得kindle更贵,我觉得要么阅读量太少,那确实没有买kindle的必要。要么买的都是盗版的纸质书?我不清楚不加以评论。。。 另外,用kindle看小说的怎么真心不懂了...",
"good_num": "112",
"comment_num": "18"
},
{
"question_id": 11,
"answer_id": 25,
"feed_source_id": 24,
"feed_source_name": "Alex",
"feed_source_txt": "回答了问题11",
"feed_source_img": "../../images/icon8.jpg",
"question": "如何评价周杰伦的「中文歌才是最屌的」的言论?",
"answer_ctnt": "不知道题主是否是学音乐的。 音乐有公认的经典,也有明显的流行趋势没有错。但归根结底,音乐是一种艺术,艺术是很主观的东西。跟画作一个道理,毕加索是大家,但很多人看不懂他的话,甚至觉得很难看...",
"good_num": "112",
"comment_num": "18"
},
{
"question_id": 12,
"answer_id": 61,
"feed_source_id": 25,
"feed_source_name": "George",
"feed_source_txt": "赞了回答12",
"feed_source_img": "../../images/icon9.jpeg",
"question": "气象铁塔的辐射大吗?",
"answer_ctnt": "我不知道那个铁塔的情况,不过气象铁塔上会有一些测太阳辐射的设备,如果说辐射的话,太阳辐射那么多,大家赶紧躲进地底下呀~~~~~要不然辐射量这么大,会变异的呀~~~~",
"good_num": "112",
"comment_num": "18"
},
{
"question_id": 13,
"answer_id": 3,
"feed_source_id": 23,
"feed_source_name": "Rebecca",
"feed_source_txt": "赞了回答13",
"feed_source_img": "../../images/icon1.jpeg",
"question": "选择 Kindle 而不是纸质书的原因是什么?",
"answer_ctnt": "难道不明白纸质书更贵啊!!! 若觉得kindle更贵,我觉得要么阅读量太少,那确实没有买kindle的必要。要么买的都是盗版的纸质书?我不清楚不加以评论。。。 另外,用kindle看小说的怎么真心不懂了...",
"good_num": "112",
"comment_num": "18"
},
{
"question_id": 14,
"answer_id": 25,
"feed_source_id": 24,
"feed_source_name": "Alex",
"feed_source_txt": "回答了问题14",
"feed_source_img": "../../images/icon8.jpg",
"question": "如何评价周杰伦的「中文歌才是最屌的」的言论?",
"answer_ctnt": "不知道题主是否是学音乐的。 音乐有公认的经典,也有明显的流行趋势没有错。但归根结底,音乐是一种艺术,艺术是很主观的东西。跟画作一个道理,毕加索是大家,但很多人看不懂他的话,甚至觉得很难看...",
"good_num": "112",
"comment_num": "18"
},
{
"question_id": 15,
"answer_id": 61,
"feed_source_id": 25,
"feed_source_name": "George",
"feed_source_txt": "赞了回答15",
"feed_source_img": "../../images/icon9.jpeg",
"question": "气象铁塔的辐射大吗?",
"answer_ctnt": "我不知道那个铁塔的情况,不过气象铁塔上会有一些测太阳辐射的设备,如果说辐射的话,太阳辐射那么多,大家赶紧躲进地底下呀~~~~~要不然辐射量这么大,会变异的呀~~~~",
"good_num": "112",
"comment_num": "18"
},
{
"question_id": 16,
"answer_id": 3,
"feed_source_id": 23,
"feed_source_name": "Rebecca",
"feed_source_txt": "赞了回答16",
"feed_source_img": "../../images/icon1.jpeg",
"question": "选择 Kindle 而不是纸质书的原因是什么?",
"answer_ctnt": "难道不明白纸质书更贵啊!!! 若觉得kindle更贵,我觉得要么阅读量太少,那确实没有买kindle的必要。要么买的都是盗版的纸质书?我不清楚不加以评论。。。 另外,用kindle看小说的怎么真心不懂了...",
"good_num": "112",
"comment_num": "18"
}
]
}
module.exports.next = next;
原生小程序分页工作记录
最新推荐文章于 2024-08-14 12:01:36 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)