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


Posted in Javascript onNovember 15, 2020

本文实例为大家分享了微信小程序实现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左右切换效果

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

Javascript 相关文章推荐
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
Sep 11 #Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 #Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 #Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 #Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 #Javascript
js监听html页面的上下滚动事件方法
Sep 11 #Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 #Javascript
You might like
在Windows版的PHP中使用ADO
2006/10/09 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
常用js脚本
2006/12/03 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
javascript实现连续赋值
2015/08/10 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
js生成随机数方法和实例
2017/01/17 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
python 生成图形验证码的方法示例
2018/11/11 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
中专生的个人自我评价
2013/12/11 职场文书
护士毕业生自荐信
2014/02/07 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
代办出身证明书
2014/10/21 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2014年人大工作总结
2014/12/10 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
运动会新闻稿
2015/07/17 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL