微信小程序实现选项卡滑动切换

2024-10-19 14:15:00

本文实例为大家分享了微信小程序实现选项卡滑动切换的具体代码，供大家参考，具体内容如下

先看效果:

再上代码:

1.index.wxml

<!--index.wxml-->
<view class="swiper-tab">
 <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>
 <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>
 <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>
</view> 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
 <!-- 我是哈哈 -->
 <swiper-item>
 <view>我是哈哈</view>
 </swiper-item>
 <!-- 我是呵呵 -->
 <swiper-item>
 <view>我是呵呵</view>
 </swiper-item>
 <!-- 我是嘿嘿 -->
 <swiper-item>
 <view>我是嘿嘿</view>
 </swiper-item>
</swiper>

2.index.wxss

/**index.wxss**/
.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: 33.33%;
 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;
}

3.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
 })
 }
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

微信小程序实现列表的横向滑动方式

微信小程序原生方式实现列表的横向滑动的两种方法: 效果图: 方式一:简单样式实现父元素设置: white-space:nowrap;//不换行 overflow-x: auto;子元素设置: display:inline-block; 方式二:scroll-view 标签 + 样式 scroll-view的横向滚动: scroll-view的内层view元素需要:display:inline-block; scroll-view的外层元素需要:white-space:nowrap; 实现代码:
微信小程序实现滑动翻页效果(完整代码)

微信小程序实现滑动翻页效果,效果图如下所示: 源码: <view class="mainFrame"> <swiper class="container" indicator-dots="{{indicatorDots}}" indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interva
微信小程序实现页面左右滑动

本文实例为大家分享了微信小程序实现页面左右滑动的具体代码,供大家参考,具体内容如下效果: wxml文件 <view bindtouchmove="tap_drag" bindtouchend="tap_end" bindtouchstart="tap_start" class="page-top {{open ? ['c-state','cover'] : ''}} "> <view bindtap=&qu
微信小程序实现列表项滑动显示删除按钮的功能

微信小程序实现列表项滑动显示删除按钮的功能微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.
微信小程序实现列表左右滑动

做微信小程序开发,和app一样经常会用到列表左右滑动操作(删除等),目前微信小程序官方没有提供相应的控件. 只能我们自己来做,方法很多,我这里给个思路,仅供参考,欢迎讨论. 1.我们可以把列表的元素放在scroll-view控件中,并且让scroll-view实现横向滑动 2.把列表内容项的宽度占满手机宽度,利用rpx特性(自适应屏幕),默认iphon6就是750rpx,只要设置大于等于750rpx就可以. 3.监听滑动后列表操作事件,即可细节点: (1)scroll-view实现横向滑动,这
微信小程序实现滑动操作代码

前言本文使用动画组件wx.createAnimation来实现滑动操作: 1. 左滑动显示操作项区域: 2. 点击操作项触发相应方法: 3. 右滑动和点击行收起操作项: 4. 点击"删除"并确定则删除该条数据. 最终效果如下: 实现过程 1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析: Tips:"详情"."取号"和"删除"点击触发使用catchtap,阻止冒泡事件向上
微信小程序实现选项卡滑动切换

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

效果图: 一.简介自己的小程序需要实现这样的功能 1.核心思想 swiper 和scroll-view共用两个变量currentTab navScrollLeft,当点击nav或者滑动swiper时设置两个变量的值为当前的index 二.实现 tab导航栏使用<scroll-view>标签,内容使用<swiper> 1.wxml实现 <view class="container">  <!-- sc
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能.分享给大家供大家参考,具体如下: 顶部滚动选项卡话不多说,直接上代码 pages/home/home.wxml <scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '>  <view class="tab"> <view class=&qu
微信小程序之选项卡的实现方法

微信小程序之选项卡的实现方法前言: 从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能. 微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能. 先看效果图: 实现代码: 页面代码: <view class="swiper-tab"> <view class="swiper-
微信小程序实现选项卡效果

本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下 demo.wxss .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: 33.33%; color: #777777; } .on
微信小程序实现选项卡的简单实例

本文实例为大家分享了微信小程序实现选项卡的具体代码,供大家参考,具体内容如下效果图实现的功能:点击上面选项卡,下面商品内容实现切换,滑动下面的商品页面,上面的选项也随页面进行切换. text.wxml:  <view class='listMiddle swiper-tab'> <view class='middle {{currentTab==0? "action" : ""}}' data-curren
微信小程序实现选项卡的方法

本文实例为大家分享了微信小程序实现选项卡的具体代码,供大家参考,具体内容如下微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能. 先看效果图: test.wxml <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0"
微信小程序 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
微信小程序实现tab左右切换效果

本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下分析 1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值. 2.swiper组件的current组件用于控制当前显示哪一页 3.swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页 wxml: <view class="record-box"> &
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f

微信小程序实现选项卡滑动切换

相关推荐

随机推荐