유니앱 슬라이딩 옵션 실현
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, //
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 -->
<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: [' ', ' 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 켜기 - 끄기) 에 따라 원하는 대로 화면 길이를 초과하면 켜는 것을 권장합니다.
fixed - 고정 포지셔닝
bgc--배경색
values - 옵션 배열
current - 현재 선택된 옵션 인덱스
isEqually - 옵션 균등 너비 켜기(true,false)
lineWidth - 밑줄 길이(비균등 옵션 상태에서 옵션 상자의 너비에 영향을 줄 수 있음 - 원하는 효과를 직접 디버깅합니다. 기본값은 48rpx)
itemSize - 선택된 글꼴 크기가 없습니다(기본값은 30rpx)
activeSize - 옵션 글꼴 크기를 선택합니다(기본값은 32rpx).
activeColor - 옵션 글꼴 색상 선택(기본 #333)
top - 탭 고정 위치 지정 사용자 top 거리
참고:
fixed를 사용하여 머리를 고정할 때 페이지 전체padding-top:98rpx;안 그러면 내용 구역이 덮여.
swiper를 사용하여 슬라이딩 전환을 할 때 페이지 높이를 100% swiper 높이를 100%로 설정해야 전체 화면 슬라이딩 전환이 가능합니다
이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
유니앱 슬라이딩 옵션 실현본고의 실례는 여러분에게 유니앱이 슬라이딩 옵션 카드를 실현하는 구체적인 코드를 공유하여 참고하도록 하였으며, 구체적인 내용은 다음과 같다. tabControl-tag.vue 페이지 참조 1. 사용법: scrollF...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.