源代碼已開源，如果對你有幫助可以點個星：https://github.com/linkaimin/xdzs

寫論壇不難，重點是各頁面之間的信息傳遞！

先放成品圖，雖然有點單調。。。。但是麻雀雖小五臟俱全！

論壇功能：

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> </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 = thiswx.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 = thiswx.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 () {} })

寫了三篇論壇相關內容了，大家每篇都讀一定會有更深的感受！！！學習貴在堅持

總結

以上是生活随笔為你收集整理的微信小程序系列（5）如何用微信小程序写一个论坛？贴心代码详解（三）列表页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。