1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序-顶部导航滑动导航栏

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

时间:2024-04-22 16:16:04

相关推荐

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

//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

//.tsPage({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:'/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.tsPage({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',

//})

},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。