分享微信小程序中实现sticky效果的列表页 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

分享微信小程序中实现sticky效果的列表页

发表时间:2022-9-14

发布人:葵宇科技

浏览次数:11

首先什么是sticky效果呢

具体参照饿了么APP的商品列表页(小程序版本发现并未实现)
具体的效果及实现可以查看一下这个demo => sticky demo on codepen
简单地说就是标题会有粘黏的效果,向下滑动时跟着列表走,向上滑动到顶部时将会固定在顶部。

但是如果在不考虑兼容性的情况下(IOS6以上、 Safari9.1+、 chrome56+)
其实从CSS3开始有一个position属性sticky就能实现这种效果

{
    position: sticky;
    top: 0;
}

只需要这两行就能实现,然而...然而兼容性那是相当的差,那么好用的一个属性为什么兼容性那么差呢?

那么饿了么的商品列表页在小程序中实有哪些步骤呢?

  1. 利用scroll-view里的scroll-into-view属性,具体可查看小程序的文档
  2. 实现sticky效果(可参照 codepen 的 demo)
  3. 获取每个scroll-into-view的scrollTop
  4. 监听scroll的滚动,并改变scroll-into-view

下来来让我们看一下具体该如何实现

<scroll-view scroll-y class="left-wrapper" id="left">
  <view wx:for="..." bindtap="..."></view>
  <!--这里是左侧的类型选择-->
</scroll-view>
<scroll-view scroll-y
             class="right-wrapper"
             bindscroll="onScroll"
             scroll-into-view="{{toView}}"
             id="right">
  <view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}">
    <view class="type-title" style="{{style}}">
      <!-- 这个就是ticky header部分 -->
      {{item.title}}
    </view>
    <view class="content">
      <view wx:for="{{item.child}}" class="item">
        <!--这里是需要展示具体的列表项-->
      </view>
    </view>
  </view>
</scroll-view>

左侧列表页没什么好讲的,无非就是按下某个类型,给上一个checked样式,然后改变toView(关键)的值。
那么toView是什么呢?toView的值是和scroll-view里面你需要跳转的view的id对应起来的,也就是代码中的这个id

<view wx:for="{{items}}" wx-for-item="item" class="lists" id="{{item.title}}">

所以当左侧按下对应的按钮以后,右侧的scroll就会跳转到相应id的scroll-into-view里面,
其实到目前为止已经实现了sticky header + 跳转的问题了
但是...
如果滑动右侧的滚动条的话,左侧的数据如何跟着变化呢?
假如不是小程序的话应该很多人都知道怎么做,无非就是监听滚动条,判断滚动条的位置,然后根据区域去改变左侧的选择。
但是...
小程序如果获得scroll-into-view在scroll-view里面的位置呢???
小程序是没有类似document.getElementById()这种Dom操作的
也没法使用JQuery的$去快捷地获取scrollTop的
也不能像vue一样直接操作$el的
还好小程序在1.4时开放了一个接口wx.createSelectorQuery()

wx.createSelectorQuery()
返回一个SelectorQuery对象实例。可以在这个实例上使用select等方法选择节点,并使用boundingClientRect等方法选择需要查询的信息。


nodesRef.boundingClientRect([callback])
添加节点的布局位置的查询请求,相对于显示区域,以像素为单位。其功能类似于DOM的getBoundingClientRect。返回值是nodesRef对应的selectorQuery。
返回的节点信息中,每个节点的位置用left、right、top、bottom、width、height字段描述。如果提供了callback回调函数,在执行selectQuery的exec方法后,节点信息会在callback中返回。
然后可以通过这个方法拿到所有的scroll-into-view的位置

let query = wepy.createSelectorQuery()
for (let i = 0; i < this.types.length; ++i) {
  let id = this.types[i]
  query.select(`#${id}`).boundingClientRect((rect) => {
    this.scrollTops[id] = rect.top
  }).exec()
}

特别注意
这个操作必须得放在onReady ()的时候去做,否则将无法得到rect属性
得到这个属性以后其实就很好操作了,直接上代码了

onScroll (event) {
  // 如果是右侧的滚动view
  if (event.currentTarget.id === 'right') {
    // 判断滚动的方向
    let top = event.detail.scrollTop
    this.dir = this.currentTop < top ? 'down' : 'up'
    this.currentTop = top
    // 判断当前滚动条所在区域,如果不在当前区域则进行跳转
    if (top > this.scrollTops[this.getNextView()] &&
        this.dir === 'down' &&
        this.checked < this.types.length - 1) {
      this.setChecked(this.checked + 1)
    }
    if (top < this.scrollTops[this.toView] &&
        this.dir === 'up' &&
        this.checked > 0) {
      this.setChecked(this.checked - 1)
    }
  }
}

然后一个简单的具有sticky效果的商品列表页跳转功能就实现了。

  1. scroll-view必须设置高度,否则在IOS上将无法使用scroll-into-view跳转
  2. 使用createSelectorQuery必须在页面渲染完成以后

存在问题

  1. scroll会有个惯性运动,这时候按左侧的按钮切换scroll-into-view会和onScroll事件发生一些冲突,测试IOS存在有该问题,希望大神给予些指导意见。

说明

由于采用了wepy构建的小程序,所以在部分代码上会和小程序有出入(改过一些),主要是思路。
顺便丢个wepy的github
wepy的本意是希望小程序能像vue一样开发,由于本人一直在用vue做项目,所以用wepy开发小程序会顺手一些,但是wepy虽然尽力贴合vue,但在某些设计上存在着一定的问题,但相对来说比直接开发小程序用起来舒服一些。

相关案例查看更多