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

最新推荐文章于 2024-09-02 12:25:42 发布

AmbroseLe

最新推荐文章于 2024-09-02 12:25:42 发布

阅读量6.3k

点赞数 3

分类专栏：微信小程序文章标签：小程序选项卡滑动切换 item列表项

本文链接：https://blog.csdn.net/qq_32786139/article/details/82800643

版权

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

摘要由CSDN通过智能技术生成

示例图片

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>