分类导航
🎮 中后端 35 🎲 原生小程序 59 📦 自我成长 15 ⚡ Uni-app 124 📷 实用工具 79 🎮 web前端 52 🌈 MUI框架 21 🎲 盘度 23
评论
探索微信小程序页面中间选项卡点击pageScrollTo滑动列表顶部个

探索微信小程序页面中间选项卡点击pageScrollTo滑动列表顶部个

枫瑞博客 | 2023年5月16日 | 原生小程序
微信小程序

我们与万物同行，星辰指引方向，云与光铺展成大地的模样

探索微信小程序页面中间选项卡点击pageScrollTo滑动列表顶部个

在很久很久以前做过一次小程序原生手写页面中间部位选项卡，按时间算应该是有1年前左右，记得当时会遇到2个问题

    1.滑动后选项卡固定顶部
​    2.选项卡切换页面闪屏

那时固定顶部还是用

position: fixed;

技术不足导致选项卡切换页面闪屏问题一直没有解决，终在星宿上将选项直接写在顶部

探索微信小程序页面中间选项卡点击pageScrollTo滑动列表顶部个

在现在的2023年，一次看到关于粘性布局的帖子，燃起来了对微信小程序页面中间选项卡的探索

效果如上，选项卡使用粘性布局自动吸附顶部，点击后pageScrollTo函数滚动到列表第一个，好处就是简单，还有一个滚动动画流畅。不足就是无法记住每个选项卡的滚动位置

资料

粘性布局

将选项卡的view添加属性

position: sticky;
top:0;

同时我们得注意父元素不同有overflow: hidden以及overflow: auto，不然粘性布局失效

pageScrollTo

该函数主要作用是点击其他选项之后滚动到制定的位置且支持动画，案例中滚动到制定的样式

 wx.pageScrollTo({
      selector: '.fengrui',
      duration: 800
    });

ID选择器：#the-idclass选择器（可以连续指定多个）：.a-class.another-class

子元素选择器：.the-parent > .the-child

后代选择器：.the-ancestor .the-descendant

跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant

多选择器的并集：#a-node, .some-other-nodes

案例

index.wxml

<!-- 轮播 -->
<view class="top"></view>
<!-- 占位 -->
<view class="fengrui"></view>
​
<view>
  <view class="nav">
    <!-- 选项卡 -->
    <view class="{{ active == index ? 'nav-item-ac':'nav-item' }}" wx:for="{{nav}}" wx:key="index" bindtap="navTap"  data-index="{{index}}" data-id="{{item.id}}">
      {{item.name}}
    </view>
  </view>
​
  <!-- 列表 -->
  <view class="lists" wx:for="{{lists}}" wx:key="index">
    {{item.title.rendered}}
  </view>
</view>

index.js

// index.js
// 获取应用实例
const app = getApp()
​
Page({
  data: {
    active: 0, //默认选项卡
    nav: [], //选项卡
    lists: [], //列表
    page: 1, //页码
    activeId: '', //分类id
  },
​
  onLoad() {
    this.getCate();
  },
  // 上拉加载
  onReachBottom() {
    this.setData({
      page: this.data.page + 1
    })
    this.lists();
  },
  // 选项卡点击
  navTap(e) {
    console.log(e.currentTarget.dataset.index)
    wx.request({
      url: 'https://www.frbkw.com/wp-json/wp/v2/posts?categories=' + e.currentTarget.dataset.id,
      success: (res) => {
        console.log(res.data)
        this.setData({
          lists: res.data,
          activeId: e.currentTarget.dataset.id,
          active: e.currentTarget.dataset.index,
          page: 1
        })
      }
    })
    wx.pageScrollTo({
      selector: '.fengrui',
      duration: 800
    });
  },
  // 请求分类
  getCate() {
    wx.request({
      url: 'https://www.frbkw.com/wp-json/wp/v2/categories',
      success: (res) => {
        this.setData({
          nav: res.data.slice(0, 3)
        })
        wx.request({
          url: 'https://www.frbkw.com/wp-json/wp/v2/posts?categories=' + res.data[0].id,
          success: (feng) => {
            this.setData({
              lists: feng.data
            })
          }
        })
      }
    })
  },
  lists() {
    wx.request({
      url: 'https://www.frbkw.com/wp-json/wp/v2/posts?categories=' + this.data.activeId + '&page=' + this.data.page,
      success: (res) => {
        console.log(res.data)
        this.setData({
          lists: this.data.lists.concat(res.data)
        })
      }
    })
  }
})

index.wxss

.top{
  background-color: rgb(160, 47, 47);
  border-radius: 20rpx;
  margin: 30rpx;
  height: 340rpx;
}
​
.nav{
  display: flex;
  align-items: center;
  margin: 30rpx;
  padding: 30rpx 0;
  position: sticky;
  top: 0;
  background-color: #ffffff;
}
.nav-item-ac{
  background-color: rgb(59, 59, 221);
  color: #ffffff;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 30rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.nav-item{
  background-color: rgb(202, 202, 202);
  color: #999999;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 30rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}
.lists{
  background-color: royalblue;
  color: #ffffff;
  font-size: 34rpx;
  border-radius: 20rpx;
  margin: 30rpx;
  height: 300rpx;
}

最后

这不是一个合理的方式，但是简单。简单不是我们最终的出来，经过大家的指导下次将探索“虚拟列表”，还能记住每个不同页面的滚动位位置

返回首页