微信小程序 swiper制作tab切换实现附源码

2024-10-30 03:27:26

微信小程序 swiper制作tab切换

实现效果图：

swiper制作tab切换

index.html

<view class="swiper-tab">
 <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view>
 <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Seside2</view>
 <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Seside3</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
 <swiper-item>
  <view>Seside1</view>
 </swiper-item>
 <swiper-item>
  <view>Seside2</view>
 </swiper-item>
 <swiper-item>
  <view>Seside3</view>
 </swiper-item>
</swiper>

index.css

.swiper-tab{
  width: 100%;
  border-bottom: 2rpx solid #777777;
  text-align: center;
  line-height: 80rpx;
}
.swiper-tab-list{
  font-size: 30rpx;
  display: inline-block;
  width: 20%;
  color: #777777;
}
.on{
  color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;
}
.swiper-box{
  display: block;
  height: 100%;
  width: 100%;
  overflow: hidden;
 }
.swiper-box view{
  text-align: center;
}

index.js

//index.js
//获取应用实例
var app = getApp()
Page( {
 data: {
  // 页面配置
  winWidth: 0,
  winHeight: 0,
  // tab切换
  currentTab: 0,
 },
 onLoad: function() {
  var that = this;
  // 获取系统信息
  wx.getSystemInfo( {
   success: function( res ) {
    that.setData( {
     winWidth: res.windowWidth,
     winHeight: res.windowHeight
    });
   }
  });
 },
 // 滑动切换tab
 bindChange: function( e ) {
  var that = this;
  that.setData( { currentTab: e.detail.current });
 },
 // 点击tab切换
 swichNav: function( e ) {
  var that = this;
  if( this.data.currentTab === e.target.dataset.current ) {
   return false;
  }else{
   that.setData( {
    currentTab: e.target.dataset.current
   })
  }
 }
})

源码下载：http://xiazai.jb51.net/201701/yuanma/tabdemo03(jb51.net).rar

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml  <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
微信小程序（三）tabBar底部导航详细介绍

tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项主要属性: 对于tabBar整体属性设置: 对于tabBar中每个Item属性设置: 下面是官网一张图对tabBar描述: app.json的配置相对就简单了: 相关文章: hello WeApp icon组件 Window text组件
微信小程序开发之Tabbar实例详解

微信小程序 Tabbar 1.下载微信小程序开发软件: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 2.扫描二维码登录,在手机点击确认登录 3.新建一个项目,这里选择无APPID,如果需要填写APPID,需要到微信小程序里面注册,然后就可以获取APPID,填写项目名称,选择项目目录(注释:微信小程序不会自己创建主目录文件,所以自己先建立一个项目文件夹,然后选择存放到这个文件夹中),添加项目,就
微信小程序 Tab页切换更新数据

微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下: 我在首页点击"5万以上"他会把跳转到买车页然后同时把"5万以上"这个筛选条件带到买车页. 之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据那么如果还想要实现我们的效果只能用别的方法了想了一下有两种思
微信小程序新建登录页并实现tabBar隐藏

微信小程序新建登录页并实现tabBar隐藏实现的效果如下两张图: app.json 设置的pages的path如下: 在app.json里面设置tabBar的值: 如果你不想在登录页有tabBar的内容,则在app.json 里面tabBar-->list-->pagePath 不能写登录页面的路径,并且首页跳转到登录页时,用 navigateTo 跳转到新页面即可实现tabBar的隐藏,如下图所示: login页面如何设置整个页面都是蓝色(#2da1ed)? 在login.json里面设
微信小程序实现tabs选项卡效果实例代码

最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断
微信小程序 tabs选项卡效果的实现

微信小程序 tabs选项卡效果前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三
微信小程序使用第三方库Immutable.js实例详解

前言 Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 filter ,不用创建中间代表.immutable 通过惰性队列和哈希映射提供 Sequence, Range, Repeat, Map, OrderedMap, Set 和一个稀疏 Vector. 微信小程序无法直接使用require( 'immutable.js' )进行调用,需要对下载的Immutable代码进行修改,才能使用. 原因分析 Immutable使用了UMD模块化规范 (f
微信小程序 swiper制作tab切换实现附源码

微信小程序 swiper制作tab切换实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view
微信小程序省市区选择器实例详解(附源码下载)

微信小程序省市区选择器: 最近学习微信小程序,为了检验自己的学习效果,自己做一个小示例,网上搜索下类似的实例,发现这个更好,大家看下. 一.区域间手势滑动切换,标题栏高亮随之切换思路是:拿当前的current来决定高亮样式 1.监听swiper滚动到的位置: <swiper class="swiper-area" current="{{current}}" bindchange="currentChanged"> cu
微信小程序简洁登录页面的实现(附源码)

目录 1.上图 2.用户不存在 3.上代码 1.上图 2.用户不存在 3.上代码 3.1login.wxml <view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}">  <view class="v2"> <view class="dltext"
微信小程序天气预报功能实现(支持自动定位,附源码)

前言由于和风天气API的更新,之前写的那篇文章可能会出现版本不兼容的情况.所以更新了这个使用新版API的小程序. 效果图天气API获取这里我用的是和风天气的API,打开官网注册或者登陆你的账号进入控制台,选择应用管理,新建应用(应用版本选择免费开发版,key的类型选择 Web API) 创建成功后就可以看到待会要用到的 key了微信小程序后台域名配置登陆小程序后台,分别点击开发和开发设置点击修改,将我们要用到的 API的域名添加到request合法域名里面,htt
微信小程序实现简单Tab切换效果

本文实例为大家分享了微信小程序实现Tab切换效果的具体代码,供大家参考,具体内容如下使用步骤代码如下(示例): 定义一个状态status data: { status: 0, }, 代码如下(示例): 在点击切换时利用status来切换根据index下标来实现 js代码: handtab(e) { console.log(e); let index = e.currentTarget.dataset.index console.log(index); this.setData({ curre
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo 利用swiper组件可简单快速编写仿抖音短视频的功能自动播放当前页视频翻页停止播放当前页视频并自动播放下页视频有其他需求也可用 cover-view 添加收藏点赞评论等功能效果图: video官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/video.html swiper官方介绍: https://developer
微信小程序 swiper 组件遇到的问题及解决方法

Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单.功能强大,是架构移动终端网站的重要选择! swiper 组件高度被限制为150px了,所以内容无法撑开. 解决办法给这组件重新设置个高度,然后在把里面的图片设置为自动适应容器大小.图片模式设置为宽度不变自动适应高度 <swiper class="test" .....>
微信小程序中的列表切换功能实例代码详解

感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就OK了,列表切换也是用到的地方也很多 wxml中的代码如下:  <view class="tab"> <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐<
微信小程序实现滚动Tab选项卡

本文实例为大家分享了微信小程序实现滚动Tab选项卡的具体代码,供大家参考,具体内容如下最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现为了偷懒,所以数据都通过wx:for遍历重复出来. 说
微信小程序实现选项卡滑动切换

本文实例为大家分享了微信小程序实现选项卡滑动切换的具体代码,供大家参考,具体内容如下先看效果: 再上代码: 1.index.wxml  <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNa

微信小程序 swiper制作tab切换实现附源码

相关推荐

随机推荐