uniapp實現(xiàn)可滑動選項卡
本文實例為大家分享了uniapp實現(xiàn)可滑動選項卡的具體代碼,供大家參考,具體內(nèi)容如下
tabControl-tag.vue
<template name="tabControl"> <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-left='scrollLeft' scroll-with-animation id="tabcard"> <view class="tabList" :style="isEqually?'display: flex;justify-content: space-between;padding-left:0;':''"> <view :class="'tabItem'+(currentIndex==index?' thisOpenSelect':'')" :style="isEqually? 'width:'+windowWidth/values.length+'px;margin-right:0;':''" v-for="(item,index) in values" :id="'item'+index" :key='index' @click="_onClick(index)"> <text :style="(currentIndex==index?'font-size:'+activeSize+'rpx;color:'+activeColor:'font-size:'+itemSize+'rpx')">{{item}}</text> <view class="activeLine" :style="{width: lineWidth+'rpx'}"></view> </view> </view> </scroll-view> </template> <script> export default { name:'tabControl', props:{ current: { type: Number, default: 0 }, values: { type: Array, default () { return [] } }, bgc:{ type:String, default:'' }, fixed:{ type:Boolean, default:false }, scrollFlag:{ type:Boolean, default:false }, lineWidth:{ type:Number, default: 100 }, itemSize:{ type:Number, default: 30 }, activeSize:{ type:Number, default: 32 }, activeColor:{ type:String, default:'' }, top:{ type:Number, default: 0 }, isEqually:{ type:Boolean, default:false } }, data() { return { currentIndex: 0, windowWidth:0, //設(shè)備寬度 leftList:[], //選項距離左邊的距離 widthList:[], //選項寬度 scrollLeft:0, //移動距離 newScroll:0, //上一次移動距離(用來判斷是左滑還是右滑) wornScroll:0, //上一次移動距離(用來判斷是左滑還是右滑) }; }, created(){ }, mounted(){ setTimeout(()=>{ uni.createSelectorQuery().in(this).select("#tabcard").boundingClientRect((res)=>{ this.$emit('getTabCardHeight', {height:res.height}) }).exec() uni.getSystemInfo({ success: (res)=> { this.windowWidth = res.windowWidth; // console.log(this.windowWidth); this.values.forEach((i,v)=>{ let info = uni.createSelectorQuery().in(this); info.select("#item"+v).boundingClientRect((res)=>{ // 獲取第一個元素到左邊的距離 // if(v==0){ // this.startLenght = res.left // } this.widthList.push(res.width) this.leftList.push(res.left) }).exec() }) // console.log(this.leftList) // console.log(this.widthList) } }); }) }, created() { this.currentIndex = this.current if(this.scrollFlag){ setTimeout(()=>{ this.tabListScroll(this.current) },300) } }, watch: { current(val) { if (val !== this.currentIndex) { this.currentIndex = val if(this.scrollFlag){ this.tabListScroll(val) } } }, }, methods: { _onClick(index) { if (this.currentIndex !== index) { this.currentIndex = index this.$emit('clickItem', {currentIndex:index}) // 開啟滾動 if(this.scrollFlag){ this.tabListScroll(index) } } }, // 選項移動 tabListScroll(index){ let scoll = 0; this.wornScroll = index; // this.wornScroll-this.newScroll>0 在向左滑 ←←←←← if(this.wornScroll-this.newScroll>0){ for(let i = 0;i<this.leftList.length;i++){ if(i>1&&i==this.currentIndex){ scoll = this.leftList[i-1] } } // console.log('在向左滑',scoll) }else{ if(index>1){ for(let i = 0;i<this.leftList.length;i++){ if(i<index-1){ scoll = this.leftList[i] } } }else{ scoll = 0 } // console.log('在向右滑') } this.newScroll = this.wornScroll; this.scrollLeft = scoll; } } } </script> <style lang="less" scoped> .fxied{ position: fixed; z-index: 2; } .tabList{ padding-top: 24rpx; padding-left: 24rpx; padding-bottom: 8rpx; white-space: nowrap; text-align: center; .tabItem{ margin-right: 60rpx; display: inline-block; position: relative; text{ // font-size: 30rpx; line-height: 44rpx; color: #666; transition: all 0.3s ease 0s; } .activeLine{ // width: 48rpx; height: 8rpx; border-radius: 4rpx; background-color: #F57341; margin-top: 8rpx; margin-left: 50%; transform: translateX(-50%); opacity: 0; transition: all 0.3s ease 0s; } } .tabItem:first-child{ // margin-left: 22rpx; } .tabItem:last-child{ margin-right: 24rpx; } .thisOpenSelect{ text{ color: #333; font-weight:600; // font-size: 32rpx; } .activeLine{ opacity: 1; } } } </style>
頁面引用
<template> <view class="page"> <tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag="true" :isEqually="false" @clickItem="onClickItem"></tabControl> <!-- 使用 swiper 配合 滑動切換 --> <swiper class="swiper" style="height: 100%;" @change="scollSwiper" :current="current"> <swiper-item v-for="(item, index) in items" :key="index"> <!-- 使用 scroll-view 來滾動內(nèi)容區(qū)域 --> <scroll-view scroll-y="true" style="height: 100%;">{{ item }}</scroll-view> </swiper-item> </swiper> </view> </template> <script> import tabControl from '@/components/tabControl-tag/tabControl-tag.vue'; export default { components: { tabControl }, data() { return { items: ['業(yè)績統(tǒng)計', '選項卡2', '選項卡3', '選項卡4', '選項卡5'], current: 0 }; }, onLoad() {}, methods: { onClickItem(val) { this.current = val.currentIndex; }, scollSwiper(e) { this.current = e.target.current; } } }; </script> <style> page { height: 100%; } .page { padding-top: 98rpx; height: 100%; } </style>
1.使用方式:
scrollFlag --是否開啟選項滾動(true -開啟 false -關(guān)閉) 根據(jù)自己需求如果選項長度超出屏幕長度 建議開啟
fixed --固定定位
bgc --背景色
values --選項數(shù)組
current --當(dāng)前選中選項索引
isEqually --是否開啟選項平分寬度(true,false)
lineWidth --下劃線長度(在非平分選項狀態(tài)下 可能會影響選項盒子的寬度-自行調(diào)試想要的效果,默認(rèn)為48rpx)
itemSize --未選中選項字體大小(默認(rèn)為30rpx)
activeSize --選中選項字體大小(默認(rèn)為32rpx)
activeColor --選中選項字體顏色(默認(rèn)#333)
top --選項卡固定定位 自定義top距離
注意:
使用fixed固定頭部的時候 要將頁面整體padding-top:98rpx;不然會蓋住內(nèi)容區(qū)域。
使用swiper實現(xiàn)滑動切換時 要將page 高度設(shè)置100% swiper高度100% 才可以全屏滑動切換
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
webpack-dev-server搭建本地服務(wù)器的實現(xiàn)
當(dāng)我們使用webpack打包時,發(fā)現(xiàn)每次更新了一點代碼,都需要重新打包,我們希望本地能搭建一個服務(wù)器,本文就介紹如何使用webpack-dev-server搭建本地服務(wù)器,感興趣的可以了解一下2021-07-07JavaScript中變量提升導(dǎo)致未定義(undefined)的問題及解決方法
在 JavaScript 中,變量提升(Hoisting)是一個相對常見的行為,尤其是當(dāng)你遇到 undefined 錯誤時,本文將詳細(xì)探討變量提升的概念、其對代碼執(zhí)行的影響以及如何避免因為變量提升而導(dǎo)致 undefined 的問題,需要的朋友可以參考下2024-09-09JS實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的簡單代碼
這篇文章主要介紹了JS實現(xiàn)頁面內(nèi)跳轉(zhuǎn)的簡單代碼,需要的朋友可以參考下2017-09-09JavaScript中為什么null==0為false而null大于=0為true(個人研究)
今天閑來沒啥事,研究了一下有關(guān)“null”和“0”的關(guān)系。希望大家看完了能有所收獲,在此與大家分享下,希望也可以受益匪淺2013-09-09BootStrap智能表單實戰(zhàn)系列(七)驗證的支持
這篇文章主要介紹了BootStrap智能表單實戰(zhàn)系列(七)驗證的支持 ,凡是涉及到用戶編輯信息然后保存的頁面,都涉及到一個數(shù)據(jù)是否符合要求的檢查,需要客服端和服務(wù)器端的校驗的問題,本文介紹非常詳細(xì),具有參考價值,需要的朋友可以參考下2016-06-06