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

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

浏览量:1216 时间: 来源:kotoriyou

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

先放成品图,虽然有点单调。。。。但是麻雀虽小五脏俱全!
小程序
论坛功能:

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

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

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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