uniapp实现可滑动选项卡


Posted in Javascript onOctober 21, 2020

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

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实现滑动切换时 要将page 高度设置100% swiper高度100% 才可以全屏滑动切换

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现根据出生年月计算年龄
Jan 10 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 Javascript
element中table高度自适应的实现
Oct 21 #Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 #Javascript
原生小程序封装跑马灯效果
Oct 21 #Javascript
uniapp实现横向滚动选择日期
Oct 21 #Javascript
实现vuex原理的示例
Oct 21 #Javascript
详解JavaScript类型判断的四种方法
Oct 21 #Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 #Javascript
You might like
php之static静态属性与静态方法实例分析
2015/07/30 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
2020/08/05 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
浅谈Python 参数与变量
2020/06/20 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
Giglio美国站:意大利奢侈品购物网
2018/02/10 全球购物
出国留学自荐信
2013/10/25 职场文书
毕业自我鉴定范文
2013/11/06 职场文书
乔迁宴答谢词
2014/01/21 职场文书
自荐信格式简述
2014/01/25 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
安全生产年活动总结
2014/08/29 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
2014年材料员工作总结
2014/11/19 职场文书
Python数据类型最全知识总结
2021/05/31 Python
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server