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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
常用简易JavaScript函数
Apr 09 Javascript
JS两种定义方式的区别、内部原理
Nov 21 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
vue+element实现表单校验功能
May 20 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 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
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
php二分查找二种实现示例
2014/03/12 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python复制文件代码实现
2013/12/23 Python
Python判断两个对象相等的原理
2017/12/12 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
numpy.array 操作使用简单总结
2019/11/08 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
python实现在线翻译功能
2020/03/03 Python
Django封装交互接口代码
2020/07/12 Python
python开发入门——列表生成式
2020/09/03 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
应用心理学专业求职信
2014/08/04 职场文书
2015年化验室工作总结
2015/04/23 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS