直播app开发搭建，手指滑动横向切换tabar功能实现

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