小程序云开发教程三: 数据的布局以及展示

数据我们有了， 就可以导入到微信的数据库了，微信这个功能简直不要太赞，我们一定要好好利用微信提供的数据库；
打开云开发控制台， 点击数据库， 点击添加集合，名称为funnys，点击导入，然后就可以导入刚刚我们导出的json文件了；
导入完成后，我们就可以进入展示了；
首页index.wxml的代码如下：

<!--index.wxml-->
<scroll-view>
  <view class='item '  wx:for="{{datas}}" wx:key="{{index}}">
    <navigator class='flexDownC' url='../itemDetail/itemDetail?id={{item.id}}'>
      <view class='userInfo flexRowL'> <view class='user flexC'> <image src='{{item.userImg || defaultImg}}' class='userImg'></image> {{item.username || '糗皮虎'}}</view> </view>
      <view class='txt'>{{item.content}}</view>
      <view class='img' wx:for="{{item.image}}" wx:for-item='imgItem' > <image lazy-load="{{lazy_load}}" mode='widthFix' src='{{("http://"+imgItem) || ""}}' class='{{item.image.length ==1 ?"dzImg1": item.image.length == 2 ?"dzimg2": item.image.length == 3 ? "dzImg3" : item.image.length == 4 ? "dzImg4": "" }} dzImg' ></image> </view>
    </navigator>
      <view class='btnsRow flexRowL'>
        <view class='ml20  flexC' bindtap='zan' data-index='{{index}}'>
          <image src='{{item.zanUrl}}' class='btns ml20' ></image> 
          <text class='ml10'> {{item.vote || 0}}</text>
        </view>
        <view class='ml60  flexC' bindtap='nav2Detail'  data-id='{{item.id}}'><image src='../../images/comment.png' class='btns ml40'></image> <text class='ml10'> {{item.commentNum || 0}}</text></view>
        <view class='ml60 '><label class='flexC'   > <image src='../../images/share.png' class='btns ml40'></image> <text class='ml10'> {{item.shareNum || 0}}</text> <button open-type='share' hidden='hidden'  data-qiuId='{{item.id}}' data-shareNum='{{item.shareNum}}'></button> </label> </view>
      </view>

      <view class='garyLine'></view>
    
  </view>

<view class='pushTop' bindtap='refresh'>上拉刷新...</view>
</scroll-view>

请注意image的写法:

 <image lazy-load="{{lazy_load}}" mode='widthFix' src='{{("http://"+imgItem) || ""}}' class='{{item.image.length ==1 ?"dzImg1": item.image.length == 2 ?"dzimg2": item.image.length == 3 ? "dzImg3" : item.image.length == 4 ? "dzImg4": "" }} dzImg' ></image>

首先, 为了让图片自适应高,并且宽随图片个数而变化, 所以我设置了mode=‘widthFix’, 然后判断有几张图,如果有一张,就100%宽, 如果有两张,就49%宽,因为图片之间要有空隙,三张就32%宽,四张就24%宽,让它可以1行显示;(后期可以考虑让它3张图片以上就分两行显示)

我们采用分页的形式,于是我将页数pageId设置在本地, 使用wx.setStorageSync()方法,然后上拉刷新或者点击也可以刷新;
我们将搜索的函数独立出来,方便调用:

  //page: 页数
  search: function(page){
    const db = wx.cloud.database()
    const _ = db.command;
    var that = this;
    console.log('search', page)
    var userId = wx.getStorageSync('userId')
    if (!page ){
      page = this.getPage()
    
    }         
    //设置页码
    this.setPage(page);
    
    db.collection('funnys').where(
      {
        id: _.lt((page + 1) * 20).and(_.gt(page * 20)), //一页20条
        unValid: _.neq(1)
      }
    ).get({
      success: res => {
        wx.hideLoading()
        var D = res.data;
        D.forEach(function(item, i){
          D[i].zanUrl = that.data.zanIcon//默认是灰色的点赞按钮, 但是不存在数据库中,所以在这里加上状态,点击后变黄色按钮
        })
        console.log(D)
        this.setData({
          datas: D
        })
        console.log('[数据库] [查询记录] 成功: ', res)
      },
      fail: err => {
        wx.hideLoading()
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
        console.error('[数据库] [查询记录] 失败：', err)
      }
    })
    wx.pageScrollTo({
      scrollTop: 0,
    })
  },

点击刷新:

 refresh: function(){
    var page = this.getPage()
    // wx.startPullDownRefresh()
    //搜索下一页
    this.search(Number(page)+1)
    wx.showLoading({
      title: '加载中...',
    })
  },

获得/设置当前的页数:

  setPage: function (page){
    console.log('setPage', page)
    wx.setStorageSync('page', page)
   
  },
  getPage: function(){
 
    console.log('getPage:', wx.getStorageSync('page'))
    return wx.getStorageSync('page')
  },

onLoad方法:

  onLoad: function() {
    var that = this;
  
    var page = wx.getStorageSync('page')
    // 查询第一页
    that.search( that.data.pageId)

 
  },

数据部分:

 data: {

    defaultImg: '../../images/tx.png',
    datas: [],
    zanIcon : '../../images/zan.png',
    zanIcon1: '../../images/zan1.png',
    pageId: 0,
    imgHeight: 225,
    lazy_load: false,
    voteArr:[],
    qiuId: ''
  },

上拉刷新:

onReachBottom: function(){
    setTimeout(()=>{
      this.refresh()
      
    },500)
  },

大家要记住,在数据库请求成功/失败函数,或者其他函数内部也好, 一定要使用ES6的新特性,就是箭头函数:

success: res=>{
	this.refresh() //this是指向外部的this
}

因为this的指向不变,不需要使用 that = this这样的庸余声明;

那么,到此为止,我的页面功能就基本完成了, 详细代码请看:
https://github.com/LWJcoder/qiupihu

大家看在我码字那么辛苦的份上,顺手给github点一个小星星呗 ?
以上代码我会放在我的github上: LWJCoder

小程序云开发教程一: 新建一个云开发项目以及基本布局
小程序云开发教程二:数据的获取(爬虫)
小程序云开发教程三: 数据的布局以及展示
小程序云开发教程四:云函数的使用与点赞功能的实现