微信小程序实现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中(function(){})()执行顺序的理解
Mar 05 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
js图片预加载示例
Apr 30 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
Apr 06 Javascript
Bootstrap媒体对象的实现
May 01 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
JS模拟实现京东快递单号查询
Nov 30 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实现 上一篇、下一篇的代码
2012/09/29 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
ext实现完整的登录代码
2008/08/08 Javascript
jQuery live
2009/05/15 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
python处理PHP数组文本文件实例
2014/09/18 Python
Python实现读取并保存文件的类
2017/05/11 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python内置加密模块用法解析
2019/11/25 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
小学班级特色活动方案
2014/08/31 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python