uni-app滑动菜单效果.既可以点击也可以滑动切换tab

港控/mmm° 2022-11-19 12:57 364阅读 0赞

> <template>
> 
> <view class="homepage">  
>                   
>                 <view class="horizonal-tab">  
>                     <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-left="scrollleft">  
>                         <block v-for="(item,index) in tabBars" :key="index">  
>                             <view class="scroll-tab-item" :class="\{'active': tabIndex==index\}"  
>                             @tap="toggleTab(index,$event)">  
>                                 \{ \{item.name\}\}  
>                                 <view class="scroll-tab-line"></view>  
>                             </view>  
>                         </block>  
>                     </scroll-view>  
>                 </view>
> 
>                   
>                 <view class="content" style="flex:1;">  
>                     <swiper :current="tabIndex" @change="tabChange" class="swiper" >  
>                         <swiper-item  style="overflow-y: auto;" v-for="(item,key) in  tabBars" :key="key">
> 
>                          <view>
> 
>                            \{ \{item\}\}
> 
>                          </view>  
>                         </swiper-item>  
>                     </swiper>
> 
>              </view>  
> </template>
> 
> <script>
> 
> export default \{  
>         data() \{  
>             return \{  
>                 scrollleft:0,//往左滑动得距离  
>                 options:\{\},  
>                 tabIndex: 0, /\* 选中标签栏的序列,默认显示第一个 \*/  
>                 tabBars:\[  
>                     \{  
>                         name: '学生信息',  
>                         id: '0'  
>                     \},  
>                     \{  
>                         name: '学习风格测评',  
>                         id: '1'  
>                     \},  
>                     \{  
>                         name: '优势能力测评',  
>                         id: '2'  
>                     \},  
>                     \{  
>                         name: '家庭教育风格',  
>                         id: '3'  
>                     \},  
>                     \{  
>                         name: '入学学科测评',  
>                         id: '4'  
>                     \},  
>                     \{  
>                         name: '入学约定',  
>                         id: '5'  
>                     \},  
>                     \{  
>                         name: '入学安排',  
>                         id: '6'  
>                     \},  
>                     \{  
>                         name: '入学需求',  
>                         id: '7'  
>                     \}  
>                 \],
> 
>  
> 
> \}  
>         \},  
>         methods: \{  
>             //切换选项卡  
>             toggleTab (index,e) \{  
>                 this.tabIndex=index;
> 
>                   if(e==0)\{//滑动页面。没办法获取鼠标点击的位置这里看情况看自己页面情况写个  
>                            this.$refs.popupsubject.show(200,40)      
>                         \}
> 
>                this.scrollleft=e.touches\[0\].pageX;
> 
>              \},
> 
> //滑动切换swiper  
>             tabChange (e) \{  
>                 this.tabIndex=e.detail.current;  
>                 this.toggleTab(this.tabIndex，0);  
>             \},
> 
> \}
> 
> </script>
> 
>