微信小程序可以滑动的选项卡

这篇博客介绍了如何在微信小程序中创建一个可以滑动切换的选项卡。通过使用`<view>`和`<swiper>`组件,结合数据绑定和事件处理,实现了点击和滑动切换不同内容区域的功能。示例代码展示了如何设置样式和监听滑动变化。
摘要由CSDN通过智能技术生成
<!--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 class="swiper-tab-list {
 {currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">哼哼</view>
  <view class="swiper-tab-list {
 {currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">吼吼</view>
</view>
<swiper current="{
 {currentTab}}" class="swiper-box" duration="300" style="height:{
 {winHeight - 31}}px" bindchange="bindChange">

  <!-- 我是哈哈 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值