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

源代码已开源，如果对你有帮助可以点个星：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"
}
}


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）如何用微信小程序写一个论坛？贴心代码详解（三）列表页相关推荐

微信小程序系列（7）如何用微信小程序写一个论坛？贴心代码详解（五）删帖页【完结篇】
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序系列（4）如何用微信小程序写一个论坛？贴心代码详解（二）评论页
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序系列（6）如何用微信小程序写一个论坛？贴心代码详解（四）搜索页
源代码已开源,如果对你有帮助可以点个星:https://github.com/linkaimin/xdzs 写论坛不难,重点是各页面之间的信息传递! 先放成品图,虽然有点单调....但是麻雀虽小五脏俱 ...
微信小程序的手机通讯录点击本页面跳转位置的代码详解
最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑.这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作 ...
pos请求微信小程序_微信小程序蓝牙连接小票打印机实例代码详解
1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapt ...
php 微信公众平台,微信公众平台代码详解-php语言（一）
2.这里把它粘贴出来,以注释的形式进行讲解. 3.首先我们要知道一些基础的知识: (1)要有自己的网站--公网环境,其中一个php页面处理微信消息: (2)微信公众平台和网站服务器之间是通过XML数据 ...
微信公众平台万能代码详解-php语言（二）
1.基础知识在上一篇地址有讲解和图片,内容大致包括微信开发者模式后台配置.微信公众开发者文档代码详解. 2.本篇将粘贴出包括所有类型在内的消息处理办法,在开发者模式下用代码完成所有编辑模式的基础内容. ...
socket 获取回传信息_Luat系列官方教程5：Socket代码详解
文章篇幅较长,代码部分建议横屏查看,或在PC端打开本文链接.文末依然为爱学习的你准备了专属福利~ TCP和UDP除了在Lua代码声明时有一些不同,其他地方完全一样,所以下面的代码将以TCP长连接的数据 ...
[Pytorch系列-61]：循环神经网络 - 中文新闻文本分类详解-3-CNN网络训练与评估代码详解
作者主页(文火冰糖的硅基工坊):文火冰糖(王文兵)的博客_文火冰糖的硅基工坊_CSDN博客本文网址:https://blog.csdn.net/HiWangWenBing/article/detai ...
Java多线程系列(九)：CountDownLatch、Semaphore等4大并发工具类详解
之前谈过高并发编程系列:4种常用Java线程锁的特点,性能比较.使用场景 ,以及高并发编程系列:ConcurrentHashMap的实现原理(JDK1.7和JDK1.8) 今天主要介绍concurre ...

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

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

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

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

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

最新文章

热门文章