微信小程序实现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 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
javascript parseInt 大改造
Sep 27 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 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
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python实现socket端口重定向示例
2014/02/10 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
python更改已存在excel文件的方法
2018/05/03 Python
python自动化报告的输出用例详解
2018/05/30 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python实现弹球小游戏
2020/08/01 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
phpquery中文手册
2021/03/18 PHP
企业消防安全责任书
2014/07/23 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Python Django获取URL中的数据详解
2021/11/01 Python