小程序多tab 多swiper + 每个tab分页

最新推荐文章于 2023-07-31 10:37:19 发布

一闪一闪亮晶晶，漫天都是小星星

最新推荐文章于 2023-07-31 10:37:19 发布

阅读量398

点赞数 2

分类专栏：小程序文章标签：小程序微信小程序前端

本文链接：https://blog.csdn.net/assassin_0302/article/details/125456169

版权

小程序专栏收录该内容

35 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在微信小程序中实现tab切换和下拉加载更多的功能。利用wxml创建了带有tab栏的布局，通过绑定tap事件和变更swiper的current属性来切换内容。每个tab对应一个swiper-item，包含滚动视图，当滚动到底部时触发scrolltolower事件，更新数据页数并加载更多内容。js代码中定义了相关函数以处理这些交互。

摘要由CSDN通过智能技术生成

wxml：



<!-- header -->
<view class="flex flex-col flex-fv flex-fh">
  <view class="flex flex-hb flex-ve text-9EA0A4 font32">
    <view class="flex flex-ve" bindtap="changeTab">
      <view class="mr40 line_height1 {{ activeIndex == 0 ? 'text-2E3238 font48 font-w':'' }}" data-index="0">tab0</view>
      <view class="mr40 line_height1 {{ activeIndex == 1 ? 'text-2E3238 font48 font-w ':'' }}" data-index="1">tab1</view>
      <view class="mr40 line_height1 {{ activeIndex == 2 ? 'text-2E3238 font48 font-w':'' }}" data-index="2">tab2</view>
    </view>

  </view>

  <view class="f1">
    <swiper class="flex-fv" bindchange="bindSwiperChange" current="{{ activeIndex }}">
      <!-- tab0 -->
      <swiper-item class="bg-red">
         <scroll-view class="flex-fv" scroll-y bindscrolltolower="scrolltolower">
          <block wx:for="{{ tabData[0].list }}" wx:key="index">
              <view></view>
          </block>
        </scroll-view>
      </swiper-item>
      <!-- tab1 -->
      <swiper-item class="bg-green">
        <scroll-view class="flex-fv" scroll-y bindscrolltolower="scrolltolower">
          <block wx:for="{{ tabData[1].list }}" wx:key="index">
              <view></view>
          </block>
        </scroll-view>
      </swiper-item>
      <!-- tab2 -->
      <swiper-item class="bg-red">
        <scroll-view class="flex-fv" scroll-y bindscrolltolower="scrolltolower">
          <block wx:for="{{ tabData[2].list }}" wx:key="index">
            <view style="height: 200rpx;" class="bg-white mt20">{{ index }}</view>
          </block>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</view>

js：

import { dateFormatStr } from "../../../utils/util";
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabData:[
      {
        list:[],
        page:1
      },
      {
        list:[],
        page:2
      },
      {
        list:[],
        page:3
      }
    ],
    activeIndex:0,

    page:1,
    pageSize:10,

    userInfo: {}, //登录人个人资料
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      userInfo: app.globalData.userInfo,
    });
    this.getList()
  },


  //tab切换
  changeTab(e){
    const { index } = e.target.dataset;
    if(index >= 0){
      this.setData({
        activeIndex:index,
      });
    }
    this.getList()
  },

  /**
   * swiper切换
   * @param {*} e 
   */
  bindSwiperChange:function(e){
    var { current } = e.detail;
    this.setData({
      activeIndex:current,
    });
    this.getList()
  },

  /**
   * 获取list
   */
  getList(){
    const { tabData,activeIndex,pageSize } = this.data
    const addlist = []
    this.setData({
      [`tabData[${activeIndex}].list`]:tabData[activeIndex].list.concat(addlist)
    })
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  scrolltolower() {
    const { tabData,activeIndex } = this.data
    console.log('tabData:',tabData)
    tabData[activeIndex].page++
    this.getList()
  },

 

  


  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})