微信小程序-06 tab选项卡滑动切换与列表Item（scroll 、 swiper）数据的获取等所用到的都有了

最新推荐文章于 2024-07-09 22:53:52 发布

原创最新推荐文章于 2024-07-09 22:53:52 发布 · 6.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #选项卡 #滑动切换 #item列表项

微信小程序专栏收录该内容

5 篇文章

订阅专栏

这篇博客详细介绍了微信小程序中实现tab选项卡滑动切换和列表Item的数据操作，包括WXML、JS和WXSS的相关代码示例。通过示例代码展示了如何获取当前选中的选项卡以及点击列表项时如何获取对应的数据。

示例图片

WXML

WXSS

示例图片

WXML

<view >
    <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
        <view class="tab-item {{currentTab==0?'active':''}}"  data-current="0" bindtap="swichNav">健康</view>
        <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感</view>
        <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">职场</view>
        <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">育儿</view>
        <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">纠纷</view>
        <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">青葱</view>
        <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">全部</view>
        <view class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav">其他</view>
    </scroll-view>
    <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
     style="height:{{winHeight}}rpx">
        <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
            <scroll-view scroll-y="true" class="scoll-h" >
                <block wx:for="{{expertList}}" wx:key="*this">
                    <view class="item-ans">
                        <view class="avatar">
                            <image class="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537520335665&di=533d913bd1587331b62b0c3f381adec5&imgtype=0&src=http%3A%2F%2Fpic31.nipic.com%2F20130731%2F7331048_094333540110_2.png"></image>
                        </view>
                        <view class="expertInfo">
                            <view class="name">{{expertList[index].name}}</view>
                            <view class="tag">{{expertList[index].tag}}</view>
                            <view class="answerHistory">{{expertList[index].answer}}个回答，{{expertList[index].listen}}人听过 </view>
                        </view>
                         <!--   data-index='{{index}}'用于js获取点击的第几项 index -->
                        <button bindtap='info' data-index='{{index}}' class="askBtn">信息</button>
                    </view>
                </block>
            </scroll-view>
        </swiper-item>
    </swiper>
</view>

js

//假数据有点多。写的很详细。很啰嗦

//e.detail.current现在是在哪一个选项卡里面

//that.data.expertList[e.currentTarget.dataset.index].name 数据的获取、获取点击了哪个“信息”按钮输出所对应的name

var app = getApp();
Page({
  data: {
    winHeight: "", //窗口高度
    currentTab: 0, //预设当前项的值
    scrollLeft: 0, //tab标题的滚动条位置
    expertList: [{ //假数据
      img: "avatar.png",
      name: "健康1",
      tag: "过去过不去都会过去",
      answer: 134,
      listen: 2234
    },
    { //假数据
      img: "avatar.png",
      name: "分分2",
      tag: "过去过不去都会过去",
      answer: 134,
      listen: 2234
    },
    { //假数据
      img: "avatar.png",
      name: "挖方3",
      tag: "过去过不去都会过去",
      answer: 134,
      listen: 2234
    },
    { //假数据
      img: "avatar.png",
      name: "哥ere4",
      tag: "过去过不去都会过去",
      answer: 134,
      listen: 2234
    },
    { //假数据
      img: "avatar.png",
      name: "阿迪王5",
      tag: "过去过不去都会过去",
      answer: 134,
      listen: 2234
    },
    { //假数据
      img: "avatar.png",
      name: "啊打发6",
      tag: "过去过不去都会过去",
      answer: 134,
      listen: 2234
    },
    { //假数据
      img: "avatar.png",
      name: "咖妃7",
      tag: "过去过不去都会过去",
      answer: 134,
      listen: 2234
    },
    ]
  },
  // 滚动切换标签样式
  switchTab: function(e) {
    console.log(e.detail)
//e.detail.current现在是在哪一个选项卡里面 
    switch (e.detail.current) {
      case 0:
          this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假数据
            img: "avatar.png",
            name: "健康1",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "分分2",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "挖方3",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "哥啊4",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "阿迪王5",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "啊打发6",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃7",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 1:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假数据
            img: "avatar.png",
            name: "情感1",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "分分2",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "挖方3",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "哥啊4",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "阿迪王5",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "啊打发6",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃7",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 2:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假数据
            img: "avatar.png",
            name: "职场",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃挖2",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "把我3",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "哥啊4",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "阿迪王5",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "啊打发6",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃7",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 3:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假数据
            img: "avatar.png",
            name: "育儿1",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "分分2",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "挖方3",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "哥啊4",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "阿迪王5",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "啊打发6",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃7",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 4:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假数据
            img: "avatar.png",
            name: "纠纷1",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "分分2",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "挖方3",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "哥啊4",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "阿迪王5",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "啊打发6",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃7",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 5:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假数据
            img: "avatar.png",
            name: "青葱1",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "分分2",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "挖方3",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "哥啊4",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "阿迪王5",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "啊打发6",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃7",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 6:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假数据
            img: "avatar.png",
            name: "全部1",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "分分2",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "挖方3",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "哥啊4",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 223
          },
          { //假数据
            img: "avatar.png",
            name: "阿迪王5",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 22
          },
          { //假数据
            img: "avatar.png",
            name: "啊打发6",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 223
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃7",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
      case 7:
        this.setData({
          currentTab: e.detail.current,
          expertList: [{ //假数据
            img: "avatar.png",
            name: "其他1",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "分分2",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "挖方3",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "哥啊4",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "阿迪王5",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "啊打发6",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          { //假数据
            img: "avatar.png",
            name: "咖妃7",
            tag: "过去过不去都会过去",
            answer: 134,
            listen: 2234
          },
          ]
        }); break;
    }
    this.checkCor();
  },
  // 点击标题切换当前页时改变样式
  swichNav: function(e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTaB == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function() {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },
  onLoad: function() {
    var that = this;
    //  高度自适应
    wx.getSystemInfo({
      success: function(res) {
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = clientHeight * rpxR - 100;
        console.log(calc)
        that.setData({
          winHeight: calc
        });
      }
    });
  },
  info(e){
    var that = this
    //数据的获取、获取点击了哪个“信息”按钮 输出所对应的name
    console.log(that.data.expertList[e.currentTarget.dataset.index].name)
  },
  footerTap: app.footerTap
})

WXSS

.tab-h {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #f7f7f7;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.tab-item {
  margin: 0 36rpx;
  display: inline-block;
}

.tab-item.active {
  color: #4675f9;
  position: relative;
}

.tab-item.active:after {
  content: "";
  display: block;
  height: 8rpx;
  width: 52rpx;
  background: #4675f9;
  position: absolute;
  bottom: 0;
  left: 5rpx;
  border-radius: 16rpx;
}

.item-ans {
  width: 100%;
  display: flex;
  flex-grow: row no-wrap;
  justify-content: space-between;
  padding: 30rpx;
  box-sizing: border-box;
  height: 180rpx;
  align-items: center;
  border-bottom: 1px solid #f2f2f2;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  position: relative;
  padding-right: 30rpx;
}

.avatar .img {
  width: 100%;
  height: 100%;
}

.avatar .doyen {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  bottom: -2px;
  right: 20rpx;
}

.expertInfo {
  font-size: 12px;
  flex-grow: 2;
  color: #b0b0b0;
  line-height: 1.5em;
}

.expertInfo .name {
  font-size: 16px;
  color: #000;
  margin-bottom: 6px;
}

.askBtn {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 14px;
  border-radius: 60rpx;
  border: 1px solid #4675f9;
  color: #4675f9;
}

.tab-content {
  margin-top: 80rpx;
}

.scoll-h {
  height: 100%;
}
/* 
.swiper {
  height: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding-top: 1000rpx; 
}
swiper-item view.item-ans {
  height: 100%;
  overflow-y: scroll;
} */

博客借鉴

https://blog.youkuaiyun.com/sophie_u/article/details/71745125