欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序实现tab左右切换效果

程序员文章站 2023-12-10 09:00:34
本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下 分析 1、设置data-current属性用于:点击当前项时,通过点击事件...

本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下

分析

1、设置data-current属性用于:点击当前项时,通过点击事件swichnav中处理e.dataset.current取到点击的目标值。

2、swiper组件的current组件用于控制当前显示哪一页

3、swiper组件绑定change事件switchtab,通过e.detail.current拿到当前页

wxml:

<view class="record-box">
  <view class="nav">
    <scroll-view scroll-x="true" class="navbar-box" srcoll-left="{{navscrollleft}}"
      srcoll-width-animation="{{true}}">
      <block wx:for="{{recordmain}}" wx:for-index="idx" wx:for-item="navitem" wx:key="idx">
        <view class="nav-item {{currenttab == idx ? 'text' : ''}}" data-current="{{idx}}" 
          bindtap="switchnav">
          <label>{{navitem.text}}</label>
        </view>
      </block>
    </scroll-view>
  </view>
</view>
------------------------------------------------
<view class="record-ft">
  <swiper class="tab-box" current="{{currenttab}}" duration="300" bindchange="switchtab">
    <swiper-item wx:for="{{[0,1,2,3]}}" wx:for-item="tabitem" wx:for-index="idx" wx:key="idx"
       class="tab-cnetent">
        <block wx:for="{{tabcontent}}" wx:for-item="tabitem" wx:key=" ">
          <view class="padding-box" bindtap="navigateurl" data-url="/pages/index/index">
            <view class="weui-list-box weui-main">
              <view class="weui-list-bd">
                <view class="img-box">
                  <image src="{{tabitem}}" class="img" mode="widthfix"></image>
                </view>
              </view>
              <view class="weui-list-ft">
                <view class="weui-title">
                  <view class="text-flow clamp-xs font-sm">{{tabitem.title}}</view>
                  <view class="text">
                    <laber>{{tabitem.text}}</laber>
                    <laber>{{tabitem.text}}</laber>
                  </view>
                </view>
                <view class="weui-cost">
                  <view>¥<laber>{{tanitem.cost}}</laber></view>
                </view>
              </view>
            </view>
          </view>
        </block>
    </swiper-item>
  </swiper>
</view>

js

page ({
  const app = getapp()
  data: {
    recordmian: [
      {
        title: "插画艺术"
      },
      {
        title: "工艺作品"
      },
      {
        title: "服装艺术"
      },
      {
        title: "三维建模"
      },
    ],
    tabcontent: [
      {
       title: "台灯卧室床头 简约现代书房 北欧宜家创意装饰个性圆球台灯床头灯",
       text: "台灯",
       cost: "1255",
       imgurl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
      },
      {
       title: "雪域冰雪天地8寸牛乳芝士蛋糕",
       text: "蛋糕",
       cost: "15",
       imgurl: "http://img.weiye.me/zcimgdir/album/file_59b8f7b66ba7f.jpg",
      },
    ],
    currenttab: 0,
    navscrollleft: 0
  },
  // 事件处理函数
  onload: function() {
    // 控制record-box随鼠标切换调整位置
    if (app.globaldata.userinfo) {
      this.setdata({
        userinfo: app.globaldata.userinfo,
        hasuserinfo: true
      })
     } else if (this.data.caniuse) {
        app.userinforeadycallback = res => {
          this.setdata({
            userinfo: res.userinfo,
            hasuserinfo: true
          })
        }
      }
    else {
      wx.getuserinfo({
        success: res => {
          app.globaldata.userinfo = res.userinfo
          this.setdata({
            userinfo: res.userinfo,
            hasuserinfo: true
          })
        }
      })
    }
    wx.getsysteminfo({
      success: (res) => {
        this.setdata({
          pixelratio: res.pixelratio,
          windowheight: res.windowheight,
          windowwidth: res.windowwidth
        })
      }
    })
  },
  // 滑动事件
  // 点击标题切换当前页时改变样式
  switchnav(event) {
    var cur = event.currenttarget.dataset.current;
    if (this.data.currenttab == cur) {
      return false;
    } else {
      this.setdata({
        currenttab: cur
      })
    }
  },
  // 滚动切换标签样式 
  switchtab(event) {
    var cur = evnet.detail.current;
    var singenavwidth = this.data.windowwidth / 5;
    this.setdata({
      currenttab: cur,
      navscrollleft: (cur - 2) * singlenavwidth
    });
  }
})

效果图:

微信小程序实现tab左右切换效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。