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

//movie.wxml

<!--顶部滑动导航栏 热映  待映-->
<view class="nav">
     <view id="0" class="{{currentIndex==0 ? 'seelected':'normal'}}" bindtap="changeCurrentIndex">
        <view>热映</view>
     </view>
     <view id="1" class="{{currentIndex==1 ? 'seelected':'normal'}}" bindtap="changeCurrentIndex">
       <view>待映</view>
     </view>
</view>
<!--使用swiper组件实现滑动页面效果-->
<!--工具:处理图片地址-->
<wxs module="until">
   module.exports={
     replaceUrl:function(url){
       return url.replace('/w.h','');
     }
   }
</wxs>
<swiper current="{{currentIndex}}" style="height:{{winHeight}}rpx">
    <swiper-item>
        <view wx:for="{{hotMovie}}" wx:key="item" class="hotMovie" id="{{item.id}}" bindtap="movieDetail">
           <view>
              <image src="{{until.replaceUrl(item.img)}}" style="width:200rpx;height:300rpx"></image>
           </view>
           <view style="width:400rpx">
              <view>{{item.nm}}</view>
              <view>{{item.star}}</view>
              <ivew>{{item.showInfo}}</ivew>
           </view>
           <view>
               <view>{{item.sc}}分</view>
           </view>
        </view>
        
    </swiper-item>
    <!--待映滚动列表-->
    <swiper-item>
        <scroll-view scroll-x="true">
           <view style="display:flex;">
              <view wx:for="{{hotMovie}}" wx:key="item" style="width:200rpx;" id="{{item.id}}" bindtap="movieDetail">
                  <view style="width:190rpx">
                       <image src="{{until.replaceUrl(item.img)}}" style="width:150rpx;height:200rpx"></image>
                       <view>{{item.nm}}</view>
                       <view style="font-size:20rpx">{{item.rt}}</view>
                  </view>
              </view>
           </view>
        </scroll-view>
    </swiper-item>
</swiper>

//movie.ts

//.ts
Page({
  data: {
    currentIndex:0,
    winHeight:0,
   // hotMovie:[{nm:'abc',id:'11'},{nm:'xyz',id:'22'}]
    hotMovie:[]
  },
  //跳转详情页面
  movieDetail:function(e){
    wx.navigateTo({
      url:'/pages/movieDetail/movieDetail?id=' + e.currentTarget.id,
    })  
  },
  changeCurrentIndex:function(e){
     this.setData({
       currentIndex:e.currentTarget.id
     })
  },
  onLoad() {
     wx.request({
       url:'https://m.maoyan.com/ajax/movieOnInfoList',
       success:(res=>{
        // console.log(res);
          this.setData({
             hotMovie:res.data.movieList,
             winHeight:res.data.movieList.length * 330
          })
       })
     })
     wx.setNavigationBarTitle({
      title:'电影列表',
    })
  },

//movie.wxss

.nav{
  display: flex;
}
.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;
}
.hotMovie{
  display: flex;
}

//movieDetail.wxml    详情页
<view>电影ID:{{id}}</view>

//movieDetail.ts
Page({
  data: {
      id:""
  },
  onLoad(e) {
    this.setData({
      id:e.id
    })
    //wx.request({
    //   url:'url',
    //})
  },

//详情页

//movieDetail.wxml    详情页
<view>电影ID:{{id}}</view>

//movieDetail.ts
Page({
  data: {
      id:""
  },
  onLoad(e) {
    this.setData({
      id:e.id
    })
    //wx.request({
    //   url:'url',
    //})
  },