个人中心
gpt4 book ai didi

uniapp实现可滑动选项卡

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章uniapp实现可滑动选项卡由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例为大家分享了uniapp实现可滑动选项卡的具体代码，供大家参考，具体内容如下 。

tabControl-tag.vue 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
< 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 >

页面引用 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
< 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实现滑动切换时 要将page 高度设置100% swiper高度100% 才可以全屏滑动切换 。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/weixin_44816309/article/details/106661706 。

最后此篇关于uniapp实现可滑动选项卡的文章就讲到这里了,如果你想了解更多关于uniapp实现可滑动选项卡的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： ACCESS数据库文件的压缩和修复方法[图文]
文章推荐： win10网络图标变成了地球解决方法
文章推荐： 租用云服务器我们需要知道的几点内容
文章推荐： Access字符串处理函数整理
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com