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

Posted 2023-02-26 亮子zl

//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:winHeightrpx">
    <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',
    //)
  ,