小程序实现点击tab切换左右滑动


Posted in Javascript onNovember 16, 2020

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

wxml

<scroll-view scroll-x="true" class="navbar-box">
 <block wx:for="{{recordMain}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
 <view class="nav-item " data-current="{{idx}}" bindtap="switchNav">
  <text class="{{currentTab == idx ? 'active' : ''}}">{{navItem.title}}</text>
 </view>
 </block>
</scroll-view>

<swiper style="margin-top:80rpx;height:{{winHeight - 40}}px;" class="tab-box" current="{{currentTab}}" duration="300" data-current="{{idx}}" bindchange="switchTab">
 <swiper-item style="height:100%;overflow-y:scroll" wx:for="{{[0,1,2,3,4,5]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-cnetent">
 <block wx:for="{{tabContent}}" wx:key=" " bindtap='myOrderDetails'>
  <!-- 列表 -->
  <view class='listBox'> 
   <view class='listTop'>
   <image src='{{item.goodsImg}}' class='goodsImg'></image>
   <view class='infor'>
    <view class=''>
    <text class='name'>{{item.name}}</text>
    <text class='price'>¥{{item.price}}</text>
    </view>
    <view class=''>
    <text class='choose'>{{item.choose}}</text>
    <text class='number'>×{{item.number}}</text>
    </view>
   </view>
   </view>
   <view class='listBottom'>
   <view>共{{item.number}}件商品,合计:¥{{item.allPrice}}</view>
   <view class='status'>
    <button>查看物流</button>
    <button>确认收货</button>
   </view>
   </view> 
  </view>
 </block>
 </swiper-item>
</swiper>

wxss

::-webkit-scrollbar {
 width: 0;
 height: 0;
 color: transparent;
}

.navbar-box {
 height: 70rpx;
 line-height: 70rpx;
 position: fixed;
 top: 0rpx;
 background: white
}

.nav-item {
 display: inline-block;
 width: 16.6%;
 text-align: center;
}

.nav-item text {
 padding-bottom: 10rpx;
}
 
page {
 background: #f2f2f2;
 font-size: 28rpx;
}

.active {
 color: #a53533;
 border-bottom: 4rpx solid #a53533;
 box-sizing: border-box;
}

.menu {
 font-size: 28rpx;
 width: 100%;
 /* overflow-x: scroll; */
 border-bottom: 20rpx solid #f2f2f2;
 padding: 30rpx 30rpx 0rpx 30rpx;
 box-sizing: border-box;
 display: flex;
 justify-content: space-between;
 position: fixed;
 top: 0rpx;
 z-index: 999;
 background: white;
}

.chooseNav {
 padding-bottom: 10rpx;
}

.listBox {
 padding: 30rpx;
 width: calc(100% - 60rpx);
 margin-left: 30rpx;
 margin-top: 30rpx;
 background: white;
 box-sizing: border-box;
 border-radius: 8rpx;
} 

.listTop {
 display: flex;
 justify-content: space-between;
}

.goodsImg {
 width: 200rpx;
 height: 200rpx;
 margin-right: 20rpx;
}

.infor {
 flex: 1;
 margin-top: 80rpx;
 font-size: 26rpx;
 color: #666;
}

.infor view {
 width: 100%;
 display: flex;
 justify-content: space-between;
}

.infor view:nth-of-type(2) {
 font-size: 24rpx;
}

.name, .choose {
 font-weight: 600;
 display: inline-block;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 320rpx;
}

.price, .number {
 padding: 5rpx 10rpx;
 box-sizing: border-box;
}

.listBottom {
 text-align: right;
}

button::after {
 border: none;
}

.status button {
 display: inline-block;
 background: white;
 border: 1px solid #dedede;
 border-radius: 66rpx;
 font-size: 24rpx;
 margin-left: 20rpx;
 color: #666;
 padding: 0rpx 30rpx;
 box-sizing: border-box;
 height: 50rpx;
 line-height: 45rpx;
 margin-top: 20rpx;
}

wxjs

Page({ 
 data: {
 recordMain: [
  
  {
  title: "全部"
  },
  {
  title: "待付款"
  },
  {
  title: "待发货"
  },
  {
  title: "待发货"
  }, {
  title: "已完成"
  },
  {
  title: "已取消"
  },
 ],
 tabContent: [
  {
  goodsImg: '/img/goods.png',
  name: '阿莎玛沙阿莎玛沙发阿莎玛沙发阿莎玛沙发阿莎玛沙莎玛沙发发',
  price: "666",
  choose: '已选:全新,16期',
  number: '32',
  allPrice: '888'
  },
 ],
 currentTab: 0,
 navScrollLeft: 0,
 winWidth: 0,
 winHeight: 0, 
 },
 // 事件处理函数
 onLoad: function () {
 var that = this; 
 /** 获取系统信息*/
 wx.getSystemInfo({
  success: function (res) {
  that.setData({
   winWidth: res.windowWidth,
   winHeight: res.windowHeight,
  });
  }
 });
 },
 // 滑动事件
 // 点击标题切换当前页时改变样式
 switchNav:function(e) {
 console.log(e.currentTarget.dataset.current)
 var that = this
 var cur = e.currentTarget.dataset.current;
 if (that.data.currentTab == cur) {
  return false;
 } else {
  that.setData({
  currentTab: cur
  })
 }
 },
 // 滚动切换标签样式 
 switchTab: function(e) {
 console.log(e) 
 var that = this; 
 that.setData({
  currentTab: e.detail.current
 }); 

 if (e.detail.current == 0) {
  console.log(0)
 } 
 else if (e.detail.current == 1) {
  console.log(11)
 } 
 else if (e.detail.current == 2) {
  console.log(2222) 
 } 
 else if (e.detail.current == 3) {
  console.log(33333)
 } 
 else if (e.detail.current == 4) {
  console.log(44444444)
 } 
 else if (e.detail.current == 5) {
  console.log(55555)
 } 
 }
})

小程序实现点击tab切换左右滑动

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 #Javascript
小程序实现tab标签页
Nov 16 #Javascript
vue+Element-ui实现登录注册表单
Nov 17 #Javascript
Vue+Element-U实现分页显示效果
Nov 15 #Javascript
vue+Element-ui前端实现分页效果
Nov 15 #Javascript
vue+Element-ui实现分页效果
Nov 15 #Javascript
vue实现抽屉弹窗效果
Nov 15 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
python实现下载文件的三种方法
2017/02/09 Python
python实现手机通讯录搜索功能
2018/02/22 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
小班幼儿评语大全
2014/04/30 职场文书
python某漫画app逆向
2021/03/31 Python
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Java死锁的排查
2022/05/11 Java/Android