微信小程序实现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 相关文章推荐
Javascript 判断是否存在函数的方法
Jan 03 Javascript
js获取图片宽高的方法
Nov 25 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
Sep 19 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
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
10个对初学者非常有用的PHP技巧
2016/04/06 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
解决Pycharm中import时无法识别自己写的程序方法
2018/05/18 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
经典大学生求职信范文
2014/01/06 职场文书
工程专业应届生求职信
2014/02/19 职场文书
2014年高考决心书
2014/03/11 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
给校长的建议书200字
2014/05/16 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
荆州古城导游词
2015/02/06 职场文书
努力工作保证书
2015/02/28 职场文书
通知格式
2015/04/27 职场文书
电影红河谷观后感
2015/06/11 职场文书
女儿满月酒致辞
2015/07/29 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书