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

最新推荐文章于 2023-01-07 08:08:34 发布

肖肖肖丽珠

最新推荐文章于 2023-01-07 08:08:34 发布

阅读量772

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_33769914/article/details/80805513

版权

这篇博客介绍了如何在微信小程序中创建一个可以滑动切换的选项卡。通过使用`<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">

  <!-- 我是哈哈