微信小程序-顶部导航滑动导航栏

Posted 2022-12-16 亮子zl

//.wxml

<view class="new">
    <view id="0" class="currentIndex==0?'selected':'normal'" bindtap='changeCurrentIndex'>
        <view>热映</view>
    </view>
    <view id="1" class="currentIndex==1?'selected':'normal'" bindtap='changeCurrentIndex'>
        <view>特硬</view>
    </view>
</view>
<!--顶部导航切换对应滑动页面-->
<swiper current="currentIndex" style="height:wirpx">
    <swiper-item>
        <view>
           电影1
        </view>
        <view>
           电影2
        </view>
    </swiper-item>
    <swiper-item>
        <view>
           待映电影1
        </view>
        <view>
          待映电影2
        </view>
    </swiper-item>
</swiper>

//.ts

//.ts
Page(

  /**
   * 页面的初始数据
   */
  data: 
      currentIndex:0
  ,
  changeCurrentIndex:function(e)
    //console.log(e.currentTarget.id)
      this.setData(
        currentIndex:e.currentTarget.id
      )
  ,

//.wxss

.selected
  width:80rpx;
  margin-left: 200rpx;
  border-bottom: 2rpx solid red;
  text-align: center;

.normal
  width:80rpx;
  margin-left: 200rpx;
  border-bottom:none;
  text-align: center;