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

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

浏览量:749 时间: 来源:kotoriyou
写论坛不难,重点是各页面之间的信息传递!先放成品图,虽然有点单调。。。。但是麻雀虽小五脏俱全!论坛功能:
1.发帖(带图片)2.浏览各帖3.评论4.搜素帖子5.作者删自己的贴以上是论坛必备的功能,缺哪个都不完整哦~这里使用了iviewweapp组件
贴心代码详解(三)会讲列表部分wxml
viewclass="content"viewclass="bg"viewclass="name"创意集/viewformbindsubmit="formSubmit"viewclass="search"buttonclass='find'form-type="submit"style="width:50px;height:30x"查询/buttoninputtype="text"name="find"placeholder="帖子名称"form-type="submit"/buttonclass='btn'bindtap="img"发帖/button/view/form/view/viewviewwx:for="{{list}}"wx:key="list"navigatorurl="../detail/detail?id={{item.id}}"open-type="navigate"viewclass="title"【{{item.category}}】{{item.title}}/viewviewclass="pic"imagestyle="width:30%;height:69px;"src="{{item.pic}}"/viewclass="info"viewclass="desc"text{{item.commentNumber}}条评论/texttext{{item.time}}/texttext楼主:{{item.writer}}/textviewclass="opr"/view/view/view/viewviewclass="hr"/view/navigator/viewjson
{"usingComponents":{"i-row":"../../dist/row/index","i-col":"../../dist/col/index"}}js
varapp=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('submitsuccesss');},fail:function(res){console.log('submitfail');}}})},formSubmit(e){console.log(e.detail.value)wx.navigateTo({url:'../find/find?find='+e.detail.value.find,//这里是重点!!!页面信息传递,要结合我的上一篇博客看})},/页面的初始数据/data:{title:"",writer:"",time:"",number:"",},/生命周期函数--监听页面加载/onLoad:function(){varthat=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(){varthat=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(){}})写了三篇论坛相关内容了,大家每篇都读一定会有更深的感受!!!学习贵在坚持

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎