微信小程序系列（5）如何用微信小程序写一个论坛？贴心代码详解（三）列表页

写论坛不难，重点是各页面之间的信息传递！

先放成品图，虽然有点单调。。。。但是麻雀虽小五脏俱全！

论坛功能：

1. 发帖（带图片）
2. 浏览各帖
3. 评论
4. 搜素帖子
5. 作者删自己的贴
以上是论坛必备的功能，缺哪个都不完整哦~
这里使用了iview weapp组件

贴心代码详解（三）会讲列表部分

wxml

<view class="content">
<view class="bg">
<view class="name">创意集</view>
<form  bindsubmit="formSubmit">
<view class="search">
<button class='find' form-type="submit" style="width:50px;height:30x">
查询
</button>
<input type="text" name="find" placeholder="帖子名称" form-type="submit"/>

<button class='btn' bindtap="img" >发帖</button>

</view>

</form>
</view>
</view>

<view wx:for="{{list}}" wx:key="list">
<navigator url="../detail/detail?id={{item.id}}" open-type="navigate" >
<view class="title">【{{item.category}}】{{item.title}}</view>
<view class="pic">
<image style="width:30%;height:69px;" src="{{item.pic}}"/>

<view class="info">
<view class="desc">

<text>{{item.commentNumber}}条评论</text>
<text>{{item.time}}</text>
<text>楼主：{{item.writer}}</text>

<view class="opr">

</view>
</view>
</view>
<
20000
span class="token tag"></view>
<view class="hr"></view>
</navigator>
</view>

json

{
"usingComponents": {
"i-row": "../../dist/row/index",
"i-col": "../../dist/col/index"
}
}

js

var app = getApp();
Page({

onPullDownRefresh() {
this.onShow();
console.log("上拉刷新");
wx.showNavigationBarLoading() //在标题栏中显示加载

},

img:function()
{
wx.navigateTo({
url: '../img/img'
})
},
getUserInfo:function(e){
console.log(e.detail.userInfo)
wx.request({
url: app.globalData.url+'all',
data:{
'writer': e.detail.userInfo.nickName,
'pic' : e.detail.userInfo.avatarUrl,
method: 'POST',
header: {
'content-type': 'application/json'
},
success:function(res) {
console.log('submit successs');
},
fail:function(res){
console.log('submit fail');
}
}
})
},
formSubmit(e) {
console.log(e.detail.value)
wx.navigateTo({
url: '../find/find?find='+e.detail.value.find,//这里是重点！！！页面信息传递，要结合我的上一篇博客看
})

},
/**
* 页面的初始数据
*/
data: {
title:"",
writer:" ",
time:"",
number:"",

},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var that = this
wx.request({
url: app.globalData.url+'community',
headers: {
'Content-Type': 'application/json'
},
success: function (res) {
//将获取到的json数据，存在名字叫list的这个数组中
console.log(res.data);
that.setData(
{
list: res.data.data,
//res代表success函数的事件对，data是固定的，list是数组
})
}
})

},
tempData: function () {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this
wx.request({
url: app.globalData.url+'community',
headers: {
'Content-Type': 'application/json'
},
success: function (res) {
//将获取到的json数据，存在名字叫list的这个数组中
console.log(res.data);
that.setData(
{
list: res.data.data,
//res代表success函数的事件对，data是固定的，list是数组
})
}
})
},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})

写了三篇论坛相关内容了，大家每篇都读一定会有更深的感受！！！学习贵在坚持