uniapp 制作一个可复用的segmented-control（tab选项卡）

开局一张图，内容全靠编

1.开局一张图（先上效果图）

2.内容全靠编

开始编写复用组件：

segmented-control.vue

<template><view id="segmented" class="segmented" :style="{top:stickyTopData+'px'}"><view class="line" :style="{transform:'translateX('+offsetLeft+'px)',width:lineWidth+'px'}"></view><view class="segmented-control"><view :id="'sc-'+index" :data-index="index" v-for="(item, index) in values" class="segmented-control-item" :key="index" :class="index === current ? 'active' : ''"@click="onClick">{{item}}</view></view></view></template><script>
export default {name: 'segmented-control',props: {values: { // 要显示的数组type: Array,default() {return [];}},stickyTop:{ // 距离头部多少px将其固定type: Number,default(){return 0;}},current: { // 当前选中第几个type: Number,default(){return 1;}}},data() {return {lineWidth: 0, // 线的宽度offsetLeft: 0 // 相对左边的距离};},methods: {/*** 点击事件*/onClick(e) {let index = parseInt(e.mp.target.dataset.index);let that = this;let id = e.mp.target.id;if (that.current !== index) {that.$emit('clickItem', index); // 父级组件回调方法}}},mounted() {let that = this;if (that.values) {if (that.values && that.values[that.current]) {that.lineWidth = 0;setTimeout(() => { // 延时获取线的宽度和左边距离const query = uni.createSelectorQuery();query.select('#sc-' + that.current).boundingClientRect();query.exec(res => {that.offsetLeft = res[0].left + 16;that.lineWidth = res[0].width - 70;});}, 500);}}},computed:{stickyTopData:function(){return uni.upx2px(this.stickyTop); // 顶部固定显示距离}},watch: {current(newValue, oldValue) {let that = this;setTimeout(() => { // 监听当前选择的item变化,重新计算线的宽和左边的距离const query = uni.createSelectorQuery();query.select('#sc-' + newValue).boundingClientRect();query.exec(res => {that.offsetLeft = res[0].left + 16;that.lineWidth = res[0].width - 70;});}, 200);}},
};
</script><style lang="less">
.segmented {position: sticky;
}
.segmented-control {display: flex;background: #ffffff; align-items: center;padding: 20upx;border-bottom: 1px solid #f6f6f6;.segmented-control-item {width: 178upx;font-size: 32upx;color: #999;}.active {color: #333;}
}
.line {height: 6upx;border-radius: 3upx;background-color: #E5A600;position: absolute;top: 80upx;left: 0;transition: all 0.3s;
}
</style>

开始编写父级组件来调用复用组件

list.vue

<template><view><segmented-controlid="tabbar":values="items":stickyTop="108":current="current"@clickItem="onClickItem"></segmented-control><view class="list" id="list">{{ current }}</view></view>
</template><script>
import segmentedControl from '@/components/segmented-control';export default {components: {segmentedControl},data() {return {items: ['已完成', '已拒绝', '已取消'],current: 0};},methods: {/*** 点击segmentedControl 事件回调*/onClickItem(index) {if (this.current !== index) {this.current = index;}}}
};
</script><style lang="less">
@import '../../css/list.less';
</style>

完事了，上图

线的宽度、过渡的时间、样式什么的自己调一调，改一改就行了

uniapp 制作一个可复用的segmented-control（tab选项卡）相关推荐

基于JavaSpringBoot+uniapp制作一个打卡小程序
生活中打卡的场景无处不在,上班打卡.景点打卡.活动打卡.课堂考勤打卡.在CSDN的APP上也有签到打卡,打卡的意义并在于打卡本身,而是在于能够成为更好的自己:跟随此文制作一个打卡系统互相督促.互相鼓励 ...
一个页面可以重复调用的TAB选项卡切换js代码鼠标悬浮
/*下面是景点页面的变动代码*/ .tabbox {height: 176px;padding-bottom: 10px;} .tabmenu {height:25px;background:url( ...
使用element UI 快速制作一个列表页面
使用element制作一个列表页面,并且当点击"查看调查问卷"时弹出弹框. (图一) (图二) (图三) 1. 制作一个名叫DataListTable <DataListTa ...
32位mips运算器logisim_大神教你制作一个简单的16位CPU
如何制作一个简单的16位CPU,首先我们要明确CPU是做什么的,想必各位都比我清楚,百度的资料也很全..... 如果想要制作一个CPU,首先得明白下计算机的组成结构(或者计算机的替代品,因为并不是只有 ...
如何制作一个简单的16位CPU
http://www.acfun.tv/v/ac362187 我果然标题党了吗?不是转载那本日本人写的书啊!纯手打表诚意,希望猴子给过,第一次投稿各位大神帮帮忙...... 如何制作一个简单的16位C ...
制作一个用户头像选择器仿 WeGame
制作一个用户头像选择器仿 WeGame CropAvatar 作者:WPFDevelopersOrg - 驚鏵原文链接:https://github.com/WPFDevelopersOrg/WPF ...
使用C# winform 制作一个按钮可自适应屏幕大小的简易加减乘除计算器
一:成果物不多展示,,,我们开始吧.. 二: 窗体包含内容 2.1 显示屏部分组成显示屏部分由两个组件组成,一个是方便操作的panel控件位于顶部,且为了使其显示屏在改变窗体大小时一直位于 ...
如何制作一个注册表文件
1.制作一个注册表文件首先要了解注册表的格式:(可先去导出一个注册表文件,用记事本打开做为参照) 第一行:REGEDIT4 或是Windows Registry Editor Version 5.00 ...
ESP32制作一个拟辉光管时钟
拟辉光管时钟 60 多年过去了,尽管辉光管已经停产,有很多工程师仍然对它情有独钟.我用 8 块液晶显示屏制作了一个拟辉光管时钟,感受复古元素的美感,表达对过去经典的敬意. 项目起源看过<命运石 ...

uniapp 制作一个可复用的segmented-control（tab选项卡）

uniapp 制作一个可复用的segmented-control（tab选项卡）

uniapp 制作一个可复用的segmented-control（tab选项卡）相关推荐

最新文章

热门文章