微信小程序实现tab和swiper切换结合效果


Posted in Javascript onJuly 17, 2020

本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下

先上效果图:

微信小程序实现tab和swiper切换结合效果

实现代码如下:

wxml页面

<scroll-view scroll-x="true" class="weui-navbar">
 <block wx:for-items="{{tabs}}">
 <view id="{{index}}" class="{{activeIndex == index ?'item_on':''}} default-item" bindtap="tabClick" style="width:{{tabW}}px">
 {{item}}
 </view>
 </block>
 <view class="weui-navbar-slider" style="transform:translateX({{slideOffset}}px);"></view>
</scroll-view>
<view class="rec" />
<swiper current="{{activeIndex}}" class="swiper-box" duration="100" bindchange="bindChange">
 <swiper-item class="swiper-item">
 <view class="slide-view">tab0</view>
 </swiper-item>
 <swiper-item class="swiper-item">
 <view class="slide-view">tab1</view>
 </swiper-item>
 <swiper-item class="swiper-item">
 <view class="slide-view">tab2</view>
 </swiper-item>
 <swiper-item class="swiper-item">
 <view class="slide-view">tab3</view>
 </swiper-item>
 <swiper-item class="swiper-item">
 <view class="slide-view">tab4</view>
 </swiper-item>
 <swiper-item class="swiper-item">
 <view class="slide-view">tab5</view>
 </swiper-item>
 <swiper-item class="swiper-item">
 <view class="slide-view">tab6</view>
 </swiper-item>
</swiper>

wxss样式:

page {
 height: 100%;
}
view , scroll-view{
 padding: 0px;
 margin: 0px;
}
.weui-navbar{
 width: 100%;
 position: fixed;
 border-bottom: 1px solid #00bba1;
 box-sizing: border-box;
 white-space: nowrap; 
 z-index: 100;
 background: white;
}
.rec{
 width: 100%;
 height: 7%;
}
.weui-navbar .default-item{
 /*width:25%;*/
 display: inline-block;
 text-align: center;
 font-size: 32rpx;
 box-sizing: border-box;
 height: 7%;
 padding-bottom: 20rpx;
}
.weui-navbar .item_on{
 color: #00bba1;
}
.weui-navbar-slider{
 position: absolute;
 width: 160rpx;
 height: 2px;
 content:"";
 background: #00bba1;
 bottom: 0px;
 left: 12.5rpx;
 transition: transform .3s;
}
.swiper-box{
 height: 900px;
 border-bottom: 1px solid #d1d1d1;
}
.swiper-box .swiper-item{
 text-align: center;
 padding-top: 200rpx;
 height: 100%;
}

js代码:

//index.js
//获取应用实例
var app = getApp();
var mtabW;
Page({
 data: {
 tabs:["综合与绘画","艺术喷漆","泥塑","纸面绘画","布面绘画","中国油画","水墨画"],
 activeIndex:0,
 slideOffset:0,
 tabW:0
 },
 //事件处理函数
 onLoad: function () {
 var that = this;
 wx.getSystemInfo({
  success: function (res) {
  mtabW = res.windowWidth / 4; //设置tab的宽度
  that.setData({
   tabW:mtabW
  })
  }
 });

 },
 bindViewTap: function() {
 wx.navigateTo({
 url: '../logs/logs'
 })
 },
 tabClick:function(e){
 var that = this;
 var idIndex = e.currentTarget.id;
 var offsetW = e.currentTarget.offsetLeft; //2种方法获取距离文档左边有多少距离
 this.setData({
 activeIndex:idIndex,
 slideOffset:offsetW
 });
 },
 bindChange:function(e){
 var current = e.detail.current;
 if((current+1)%4 == 0){

 }
 var offsetW = current * mtabW; //2种方法获取距离文档左边有多少距离
 this.setData({
  activeIndex:current,
  slideOffset:offsetW
 });

 }

})

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

Javascript 相关文章推荐
js验证表单大全
Nov 25 Javascript
Js的MessageBox
Dec 03 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
微信小程序实现tab切换效果
Nov 21 #Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 #Javascript
值得收藏的vuejs安装教程
Nov 21 #Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 #jQuery
jquery ajaxfileupload异步上传插件
Nov 21 #jQuery
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
简单讲解Python中的闭包
2015/08/11 Python
Python批量发送post请求的实现代码
2018/05/05 Python
Python返回数组/List长度的实例
2018/06/23 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python 使用指定的网卡发送HTTP请求的实例
2019/08/21 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python类成员继承重写的实现
2020/09/16 Python
python 常见的反爬虫策略
2020/09/27 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
社区学雷锋活动策划方案
2014/01/30 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
小学语文复习计划
2015/01/19 职场文书
焦点访谈观后感
2015/06/11 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js