微信小程序版博客——列表页相关问题汇总

在上一篇主要将图片相关的问题进行的汇总,这篇主要说下在开发列表页时候的一些问题。

下拉加载实现

首先是分页加载列表,从网上例子和文档来看有两种实现方式,一种是根据Page()上的 onReachBottom属性:页面上拉触底事件的处理函数,另一种就是通过scroll-view组件上的bindscrolltolower,两种方法都行。

我这里用的后者,因为想使用有赞的加载UI,这里需要注意使用scroll-view需要设置height,不然事件不会触发,其他scroll-view上的属性可以参考文档:

.scorll-margin {
  margin-top: 45px;
  height: 100vh;
}

有赞提供了Loadmore加载组件,可以使用。

<import src="/dist/loadmore/index.wxml" />
<template is="zan-loadmore" data="{{ loading }}" />
<template is="zan-loadmore" data="{{ nodata }}" />
<template is="zan-loadmore" data="{{ nomore }}" />

image

在代码层面只要控制loading,nodata,nomoretruefalse就可以了,还是比较方便的。

具体代码比较简单,就不贴出来了。

回到顶部

在开发的时候发现滚到最底部再想回到最顶部不是很方便,于是想看看有没有直接回到顶部的功能。

结果看到文档scroll-view有属性支持,直接设为true就可以了。

enable-back-to-top="true"

加载多次请求的问题

加载多次的问题貌似网上抱怨的人很多,但由于我的接口目前数据不多,性能还ok,所以测试下来感觉影响不大,为了避免多次请求,只能用个比较懒的方式了,直接定义一个变量lowerComplete去控制了,数据请求期间将lowerComplete设置为false,请求完再设置回true

lower: function () {
    let that = this;
    if (!that.data.lowerComplete) {
      return;
    }
    if (!that.data.nomore &&!that.data.nodata) {
      that.setData({
        loading: true,
        lowerComplete: false
      });
      that.getData();
      that.setData({
        lowerComplete: true
      });
    }
    console.log("lower")
  }

页面跳转

点击列表页某个item需要跳转到它的详情页,并且需要带上需要传到详情页的参数。

这里用到事件处理函数bindtap:

<view class="feed-item" id="{{item.id}}" bindtap="bindItemTap">

传参的方式挺多的,我这里用的最懒的方式,拼接url的方式:

//事件处理函数
bindItemTap: function (e) {
    let blogId = e.currentTarget.id;
    wx.navigateTo({
      url: '../detail/detail?blogId=' + blogId
    })
  },

滚动条位置问题

滚动条位置可以通过设置scroll-viewscroll-top属性,这个问题不大。

我在编写专题页的时候,由于顶部是悬浮固定的Tab页,在切换时记得重置下scroll-top的值。

有可能用户在浏览第一个tab时滚动条已经滚到很下面了,在切换tab时,滚动条的位置还在原来位置,体验不太好。

image

总结

基本上列表页已经七七八八完成的差不多了。后续有问题或者有更好的建议会持续优化

作者:玄冰
欢迎关注我的微信公众号和博客小程序
欢迎关注我的公众号 欢迎关注我的公众号