微信小程序实现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 相关文章推荐
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
浅谈vue加载优化策略
Mar 19 Javascript
解决小程序无法触发SESSION问题
Feb 03 Javascript
微信小程序实现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的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
php实现登录页面的简单实例
2019/09/29 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
AngularJS入门教程之数据绑定原理详解
2016/11/02 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python复制文件代码实现
2013/12/23 Python
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
python编写爬虫小程序
2015/05/14 Python
python图像处理之反色实现方法
2015/05/30 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python 求10个数的平均数实例
2019/12/16 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
劲霸男装广告词
2014/03/21 职场文书
公司募捐倡议书
2014/05/14 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
三八妇女节寄语
2015/02/27 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL