微信小程序选项卡点击导航内容切换滑动内容导航切换

index.wxml:

<!--index.wxml-->
<view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">导航1</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">导航2</view> <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">导航3</view>
</view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> <!-- 内容1 --> <swiper-item> <view>我是内容1</view> </swiper-item> <!-- 内容2 --> <swiper-item> <view>我是内容2</view> </swiper-item> <!-- 内容3--> <swiper-item> <view>我是内容3</view> </swiper-item>
</swiper>

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;
}

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

微信小程序选项卡点击导航内容切换滑动内容导航切换相关推荐

微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
微信小程序实现点击拍照长按录像功能
微信小程序实现点击拍照长按录像功能代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
利用 node.js 云函数解密获取微信小程序的手机号码等加密信息 encryptedData 的内容。
首先你必须会用微信小程序的云函数功能: 1.创建一个名为token的云函数 2.在云开发的云函数管理中添加对应的token云函数 3.在开发工具中编辑云函数token 4.点击右键,安装并部署大致是 ...
微信小程序选项卡数组列表单项选择切换效果
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法效果如图: wxml:<view class="item" wx:for="{{data}}&qu ...
微信小程序系列——点击图片放大预览
需求开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小这怎么能行!!! 所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了! 实现步骤微信提供了预览图片的接口, ...
微信小程序 swiper 点击切换，左右滑动，自动滑动，源码下载
已解决不同页面不同高度已解决卡死问题 .wxml <view class="swiper-tab"> <view class="swiper-ta ...
微信小程序选项卡、列表动态显示按钮
小程序选项卡功能实现 wxml页面: 先给选项卡赋值data-current="待确认" 添加点击事件bindtap="clickTab", 在js里click ...
微信小程序 map 点击图标回到自己的位置（不使用controls控件）
先上效果图: 原由(必看): 本来微信小程序的map 里面的 controls控件可以轻松实现,但是官方说要废弃了,说采用 cover-view代替,其实就是一个点击事件.用不用cover-view ...

微信小程序选项卡点击导航内容切换滑动内容导航切换

微信小程序选项卡点击导航内容切换滑动内容导航切换相关推荐

最新文章

热门文章

微信小程序选项卡 点击导航内容切换 滑动内容导航切换

微信小程序选项卡 点击导航内容切换 滑动内容导航切换相关推荐

最新文章

热门文章

微信小程序选项卡点击导航内容切换滑动内容导航切换

微信小程序选项卡点击导航内容切换滑动内容导航切换相关推荐