小程序实现点击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 相关文章推荐
js setTimeout opener的用法示例详解
Oct 23 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
js实现每日签到功能
Nov 29 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
JavaScript中清空数组的三种方式
2017/03/22 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
Django中使用group_by的方法
2015/05/26 Python
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
本科生详细的自我评价
2013/09/19 职场文书
怎么写好自荐信
2013/10/30 职场文书
英语分层教学实施方案
2014/06/15 职场文书
好人好事演讲稿
2014/09/01 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
办公室日常管理制度
2015/08/04 职场文书
九不准学习心得体会
2016/01/23 职场文书
诉讼和解协议书
2016/03/23 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
python中如何对多变量连续赋值
2021/06/03 Python