小程序实现点击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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
web 页面分页打印的实现
Jun 22 Javascript
js 对小数加法精度处理示例说明
Dec 27 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
原生javascript实现隔行换色
Jan 04 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
ant design vue导航菜单与路由配置操作
Oct 28 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
微信小程序实现滚动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
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
深入解析Python中的集合类型操作符
2015/08/19 Python
Python的pycurl包用法简介
2015/11/13 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python实现求特征选择的信息增益
2018/12/18 Python
详解python中list的使用
2019/03/15 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
大学生专科毕业生自我评价
2013/11/17 职场文书
寒假思想汇报
2014/01/10 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
机械专业技术员求职信
2014/06/14 职场文书
新农村建设标语
2014/06/24 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
财务审计整改报告
2014/11/06 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android
使用Redis实现分布式锁的方法
2022/06/16 Redis