网站没有ftp 怎么推广,有口碑的大良网站建设,网络推广中心,wordpress切换语言 语言包实现效果如图 要实现底部内部的左右滑动切换带动上方tab栏的切换#xff0c;并且下方内容要实现纵向滚动 #xff0c;所以需要swiper#xff0c;swiper-item,scroll-view组合使用
tab栏部分
view classtabsview classtab_item v-for并且下方内容要实现纵向滚动 所以需要swiperswiper-item,scroll-view组合使用
tab栏部分
view classtabsview classtab_item v-for(item,index) in tabList :keyindex clicktabSwitch(item,index)view classtab_name :classactiveTabindex?act_name:{{item.name}}/viewview classtab_cover v-ifactiveTab!index/viewimage v-else :srcgetimg(leaderboard_toggle.png) stylewidth: 30rpx;height: 11rpx;/image/view/view tab栏点击切换需要重新调取数据
tabSwitch(item, index) {this.scrollTop 0this.activeTab index// this.dataList []this.getData()},
下方内容部分
swiper classdata_list changeswipeIndex :currentactiveTab:duration300 previous-margin0 :style{ height: (pageHeight-205)px } :circulartrueswiper-item v-for(val,idx) in tabList :keyidxscroll-view v-ifdataList.length0 scroll-ytrue :style{ height: (pageHeight-205)px }:scroll-topscrollTopview stylepadding-bottom: 100rpx;view classdata_item :classindex*114?act_item(index*11):v-for(item,index) in dataList :keyindex clickgoDetail(item,index)view classleimage :srcgetimg(Leaderboard_(index*11).png) modeheightFixstyleheight: 112rpx;/imageview classitem_content{{item.idea_name}}/view/viewview classlike_num{{item.likecount}}/view/view/view/scroll-viewview v-else classdata_none :style{ height: (pageHeight-205)px }image :srcgetimg(null-page.png) stylewidth: 380rpx;height: 380rpx;/imageview classnothing空空如也~/view/view/swiper-item/swiper
滑动切换改变上方tab栏状态并重新调取数据
swipeIndex(e){this.activeTab e.detail.currentthis.scrollTop 0this.getData()}
以上即可实现页面左右滑动切换带动tab栏切换
但是上面这种方式适合tab栏目比较少内容列表也比较短的情况如果tab栏项目很多内容数据也很多用swiper做切换会很卡顿这个官方地址也有介绍swiper | uni-app官网
我懒得去研究怎么去优化他不过这个博主的优化方式很厉害可以借鉴一下附上地址
uni-app swiper数量过多时卡顿优化方案_uniapp swiper卡顿_菜鸟驿站2020的博客-CSDN博客
所以当数据很多时我使用了touch事件加动画的方式做切换
如图tab栏选项很多内容列表数据也很多 tabs部分
view classtab_boxview stylemax-width: 600rpx;height:80rpx ;u-tabs :listtabsList :currentactTab keyNamecategory_name clicktabSwitch lineWidth20lineHeight4 lineColor#000000:activeStyle{color: #000000,fontWeight: bold,transform: scale(1.4)}:inactiveStyle{color: #666666,transform: scale(1.2)}/u-tabs/viewview classmore clickcateShow trueimage :srcgetimg(originality_label.png) stylewidth: 50rpx;height: 50rpx;/image/view/view
列表部分
view classdata_list touchstarttouchStart touchendtouchEnd :animationanimationData :style{ height: (pageHeight-(marginTop*165))px }scroll-view scroll-ytrue :style{ height: (pageHeight-(marginTop*165))px }scrolltolowergetBottom :lower-threshold80 :scroll-topscrollTopview v-ifdataList.length0 stylepadding-bottom: 100rpx;view classdata_item v-for(item,index) in dataList :keyindexclickgoDetail(item,index)view classdata_topimage :srcgetimg(originality_quote.png) stylewidth: 64rpx;height: 64rpx;/imageview classdata_content{{item.idea_name}}/viewview classlab_box v-ifitem.tag_list item.tag_list.length0view classlab_item v-for(val,idx) in item.tag_list :keyidx{{val.tag_name}}/view/viewview classtimes{{item.updatetime | getDateDiff}}/view/viewview classdata_botview classshare click.stopgoShare(item,index)image :srcgetimg(share_gray.png) stylewidth: 36rpx;height: 36rpx;/imageview classshare_tt分享/view/viewview classinfosview classcommimage :srcgetimg(review_gray.png) stylewidth: 44rpx;height: 44rpx;/imageview classcomm_num{{item.comment_count}}/view/viewview classcomm click.stopaddLike(item,index)image :srcitem.is_like?getimg(like_red.png):getimg(like_gray.png)stylewidth: 44rpx;height: 44rpx;/imageview classcomm_num{{item.like_count}}/view/view/view/view/view/viewview v-else classdata_none :stylemargin-top:(marginTop*1150)px;image :srcgetimg(null-page.png) stylewidth: 380rpx;height: 380rpx;/imageview classnothing空空如也~/view/view/scroll-view/view 如代码所以我使用了touchstart,和touchend事件并且加了:animationanimationData data(){return{scrollTop: 0,startX: 0,startY: 0,animationData: {}, // 动画}}
onLoad中需要先创建动画实例
onLoad() {uni.getSystemInfo({success: res {this.pageHeight res.windowHeight;}})// #ifdef MP-WEIXINconst systemInfo wx.getSystemInfoSync();const res wx.getMenuButtonBoundingClientRect();this.height (res.top - systemInfo.statusBarHeight) * 2 res.heightthis.marginTop this.height systemInfo.statusBarHeight// #endif// 创建动画实例this.animation uni.createAnimation({timingFunction: ease,duration: 120})},
touchend结束事件中计算手指滑动距离判断滑动方向并重新调用接口加载数据并且在判断完滑动方向之后加动效不让左右滑动看起来生硬
touchStart(event) {this.startX event.touches[0].pageX;this.startY event.touches[0].pageY;},touchEnd(event) {let deltaX event.changedTouches[0].pageX - this.startX; let deltaY event.changedTouches[0].pageY - this.startY;if (Math.abs(deltaX) Math.abs(deltaY) Math.abs(deltaX)60) {if (deltaX 0) { //往左if (this.actTab this.tabsList.length - 1) {this.actTab 0} else {this.actTab this.actTab * 1 1}this.cate_id this.tabsList[this.actTab].id// 动画左出右进this.animation.translateX(-100%).step().opacity(0).step({duration: 10}).translateX(100%).step({duration: 10}).translateX(0).opacity(1).step()this.animationData this.animation.export()setTimeout(() {this.animationData {}}, 250)this.dataList []this.page 1this.getData()this.goJust() //scrollTop改为0} else if (deltaX 0) { //往右if (this.actTab 0) {this.actTab this.tabsList.length - 1} else {this.actTab this.actTab * 1 - 1}this.cate_id this.tabsList[this.actTab].id// 动画右出左进this.animation.translateX(100%).step() //先横向向右移至100%即整块移没.opacity(0).step({ //再使滑块部分透明duration: 10}).translateX(-100%).step({ //然后趁透明横向向左移至-100%duration: 10}).translateX(0).opacity(1).step() //接着横向向右移动至初始位置并恢复透明度this.animationData this.animation.export()// 为避免uniapp动画只有第一次生效必须延迟删除动画实例数据setTimeout(() {this.animationData {}}, 250)this.dataList []this.page 1this.getData()this.goJust() //scrollTop改为0} else { // 挪动距离0}}else{}},
最后一步因为内容包裹在scroll-view里所以触底加载下一页写在scroll-view的触底事件里scrolltolowergetBottom
getBottom() {if (this.page this.last_page) {this.page 1this.getData()}},
