uniapp 滑块封装

最近在做uniapp，需要一个滑块的组件，刚开始写了一个小滑块就两个内容，来回滑。后来项目有又个大的滑块，项目是动态加载的，还需要有动态效果，就又写了一个。
效果图：

点击时，会有滑动效果，上代码：

/*** 弹窗组件 made by jidzh** 最后修改时间：2021-09-10** 传入参数：* switchNames：滑块name数组* widthItem：每个滑块的宽度* componentName：引用组件时，多次使用需要给一个唯一名称* currentName：当前选中滑块名称* * 抛出方法：* switchChange：选择后返回选择滑块名称**/<template><view class="text"><view class="text-block" :style="{flexBasis: widthItem}" v-for="(name,index) in switchNames" :key="'swithBox'+index" :id="'swithBox' + componentName +index" @click="switchChange(name,index)">{{name}}</view><view class="box" :style="[shadowStyles,{minWidth: widthItem}]"><view class="shadow-box">{{switchText}}</view></view></view>
</template><script>export default{props:{switchNames:{type: Array,default:() => []},widthItem: {type: String,default: '25%'},componentName: {type: String,default: ''},currentName:{type: String||Number,default: ''}},data(){return{switchText: '',leftGroup: [],shadowStyles: {},top0: 0,left0: 0}},watch:{currentName(val,old){console.log(val)}},async mounted() {this.switchText = this.switchNames[0];let leftGroup = await this.getDom(0);this.shadowStyles = {width: leftGroup[0].width,height: leftGroup[0].height,top: 0,left: 0};this.currentNameChange();},methods:{// 点击switch变换选择async switchChange(item,index){this.switchText = item;let leftGroup = await this.getDom(index);this.shadowStyles = {width: leftGroup[index].width,height: leftGroup[index].height,top: leftGroup[index].top,left: leftGroup[index].left};this.$emit('switchChange',this.switchText);},getDom(i){let self = this;return new Promise((resolve, reject) => {uni.createSelectorQuery().select("#swithBox" + this.componentName +i).boundingClientRect((data)=> {self.leftGroup[i] = {};if(!i) {self.top0 = data.top;self.left0 = data.left;}self.leftGroup[i].width = data?.width + 'px';self.leftGroup[i].height = data?.height + 'px';self.leftGroup[i].left = data?.left - self.left0 + 'px';self.leftGroup[i].top = data?.top - self.top0 + 'px';resolve(self.leftGroup);}).exec();})},async currentNameChange(){if(this.currentName == this.switchNames[0]) returnlet index = this.switchNames.findIndex(item => this.currentName == item);this.switchText = this.switchNames[0];if(index == -1) return;this.switchText = this.currentName;let leftGroup = await this.getDom(index);this.shadowStyles = {width: leftGroup[index].width,height: leftGroup[index].height,top: leftGroup[index].top,left: leftGroup[index].left};},async refresh(){let leftGroup = await this.getDom(0);this.shadowStyles = {width: leftGroup[0].width,height: leftGroup[0].height,top: 0,left: 0};}}}
</script><style lang="scss" scoped>.text {display: flex;flex-wrap: wrap;position: relative;.text-block {flex-basis: 25%;text-align: center;height: 72rpx;line-height: 72rpx;color: color(ts);@include font(24);}.usage-block {flex-basis: 33.33%;}.box{display: flex;align-items: center;position: absolute;top: 0;left: 0;transition: top 0.3s,left 0.3s;.shadow-box{width: 100%;height: 56rpx !important;line-height: 56rpx;@include font(24);@include radius(small);background-color: color(secondery);color: color(bg2);transition: left 0.3s;text-align: center;}}}
</style>

uniapp 滑块封装相关推荐

uni-app 请求封装
uni-app 请求封装请求封装 // 默认配置 const instanceConfig = {baseURL: '',header: {'content-type': 'application/ ...
uniapp简单封装的激励广告和插屏广告
挺久没更新公众号了,今天给大家写一个uniapp简单封装的激励广告和插屏广告的教程,主要的解决的问题就是如果一个小程序页面多且需要调用的广告也比较多,这样会导致出现许多的重复代码,而且使得页面js文件 ...
uniapp可以封装组件嘛_uniapp聊天App实例|vue+uniapp仿微信界面|红包|朋友圈
一.功能阐述今天给大家分享的是基于UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消 ...
【uni-app】封装websokcet以及使用方法
在使用uniapp开发一个IM即时通讯系统时,需要用到websocket协议,包括对话等等 vue封装sokect传送门 uni中封装websokect.js //是否已经连接上ws let isOp ...
uni-app：封装组件
Vue封装组件根据官方文档来做其实很简单,我这里记录一下注意点. 通过uni-app的easycom: 将组件引入精简为一步.只要组件安装在项目的 components 目录下,并符合 compon ...
uniapp之封装公共的搜索控件
为了增加代码的复用性,多次重复的效果图如下: 1.在componts文件夹下创建一个uni-search.vue的文件 <template> <view class=&q ...
uni.request接口封装；小程序uni-app接口封装
另一篇请求接口简单封装在api下的index.js 本片资源下载地址本片封装了post get put请求,重点在request.js文件 1.新增四个文件 2.根目录下的utils下的reques ...
uniapp 接口封装
1.一次封装 utils/request.js export const baseURL = '基地址'export const request = (options) => {return n ...
uni-app 项目封装http 和url
需求分析: 封装http请求和url请求,蛀牙目的还是为了统一管理将这两个部分放在http文件夹下面 http/http.js //路由公共的部分: const baseUrl = 'http:// ...

uniapp 滑块封装

uniapp 滑块封装相关推荐

最新文章

热门文章