直播app开发搭建，手指滑动横向切换tabar功能实现
<script>
import { mapState } from 'vuex';
export default {
data() {
return {
swiperCurrent: 0,
currentNum: 0,
tabs: [
[
{ value: '111111111111' }, { value: '2222222222' }, { value: '33333333' }, { value: '4444444' },
{ value: '5555' }, { value: '6666' }, { value: '77777' }, { value: '77777' }, { value: '77777' },
{ value: '77777' }, { value: '77777' }, { value: '77777' }, { value: '77777' }, { value: '000' },
],
[
{ value: 'aaaaaaa' }, { value: 'bbbbbbbbbbb' },
],
],
videoList: [
{ name: '臻选视频' },
{ name: '精选文章' },
],
anchor: { //处理swiper高度问题
deviceHeight: 0,
anchorTop: 0,
anchorBottom: 0,
anchorScreenBottom: 0
}
}
},
onPageScroll(e) {
// console.log(e.scrollTop);
this.scrollTop = e.scrollTop;
},
components: {},
computed: {
...mapState(["hasLogin", "safeAreaBottom"])
},
onLoad() {
this.computeSwiperHeight(0)
},
onShow() {},
methods: {
// tabs通知swiper切换
tabsChange(e) {
this.swiperCurrent = e.index;
},
// swiper-item左右移动，通知tabs的滑块跟随移动
transition(e) {
this.currentNum = e.detail.current
console.log(e.detail.current, '-------')
this.computeSwiperHeight(e.detail.current)
},
// scroll-view到底部加载更多
onreachBottom() {
console.log(11111111111)
},
computeSwiperHeight(pageIndex) {
let getSwiperHeight = () => {
let min = this.anchor.anchorScreenBottom - this.anchor.anchorTop;
let value = this.anchor.anchorBottom - this.anchor.anchorTop
return Math.max(min, value)
}
wx.createSelectorQuery()
.select('.anchor-screen-bottom')
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(res => {
this.anchor.anchorScreenBottom = res[0]?.bottom
})
wx.createSelectorQuery()
.selectAll('.anchor-top')
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(res => {
this.anchor.anchorTop = res[0][pageIndex]?.top
this.anchor.deviceHeight = getSwiperHeight()
})
wx.createSelectorQuery()
.selectAll('.anchor-bottom')
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(res => {
this.anchor.anchorBottom = res[0][pageIndex]?.bottom
this.anchor.deviceHeight = getSwiperHeight()
})
},
goDetail() {
this.$jumpTo('/pages-home/articleDetail/index')
},
goPage(routeUrl) {
// console.log(routeUrl);
// jumpTo(routeUrl)
this.$jumpTo(routeUrl)
}
}
}
</script>
以上就是 直播app开发搭建，手指滑动横向切换tabar功能实现，更多内容欢迎关注之后的文章