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

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

下拉加载实现

首先是分页加载列表,从网上例子和文档来看有两种实现方式,一种是根据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 }}" />

截图1

在代码层面只要控制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时,滚动条的位置还在原来位置,体验不太好。

截图2

总结

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

原文发布于微信公众号 - Bug生活2048(BugLife2048)

原文发表时间:2018-04-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏美丽应用

PPIICC:简洁易用的长截图工具

1282
来自专栏前端小叙

推荐两款简单好用的图片放大jquery插件

一、zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zo...

6869
来自专栏Core Net

微信小程序:动画(Animation)

官方文档是这样说的:①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 ani...

2K1
来自专栏北京马哥教育

最全整理 | 121个Ubuntu终端常用快捷键

Ubuntu中的许多操作在终端(Terminal)中十分的快捷,记住一些快捷键的操作更得心应手。在Ubuntu中打开终端的快捷键是Ctrl+Alt+T。其他的一...

32912
来自专栏闻道于事

HTML表格表单综合——用户注册表

今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-/...

1.5K6
来自专栏前端下午茶

Vue项目预渲染机制引入实践

周末想顺便把已经做好静态页面的webApp项目做一下SEO优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着...

6802
来自专栏从零开始学自动化测试

python测试开发django-7.模板继承

打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了。

943
来自专栏惶心 - 技术博客

Grouper.html: 分享群组的最佳方式

之前看到 狗子 的 https://getrbq.com ,是给 DIYgod 的群组做的一个加群页面,发现他是用 折影轻梦 的模板修改了一下做好的。虽然说这个...

1726
来自专栏向治洪

用xml来编写动画

我们可以使用代码来编写所有的动画功能,这也是最常用的一种做法。不过,过去的补间动画除了使用代码编写之外也是可以使用XML编写的,因此属性动画也提供了这一功能,...

2165
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:发现 Wijmo

什么是 Wijmo? Wijmo 是一个基于jQuery UI的UI部件的套件。Wijmo 部件对客户端Web开发进行了优化,并且充分利用了jQuery的强大...

2269

扫码关注云+社区

领取腾讯云代金券