11.5修改
This commit is contained in:
4
uni_modules/cc-newsTabs/changelog.md
Normal file
4
uni_modules/cc-newsTabs/changelog.md
Normal file
@@ -0,0 +1,4 @@
|
||||
## 2.0（2023-10-28）
|
||||
适配vue3 小程序
|
||||
## 1.0.0（2023-07-16）
|
||||
组件初始化
|
||||
192
uni_modules/cc-newsTabs/components/cc-newsTabs/cc-newsTabs.vue
Normal file
192
uni_modules/cc-newsTabs/components/cc-newsTabs/cc-newsTabs.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
|
||||
<!-- 顶部选项卡 -->
|
||||
<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
|
||||
<!-- <view v-for="(item,index) in tabArr" :key="item.id" class="nav-item"
|
||||
:class="{current: index === tabCurrentIndex}" :id="'tab'+index" @click="changeTab(index)">{{item.name}}
|
||||
</view> -->
|
||||
<view v-for="(item,index) in tabArr" :key="item.id" class="nav-item"
|
||||
:class="{current: index === o_index}" :id="'tab'+index" @click="changeTab(index)">{{item.name}}
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let windowWidth = uni.getSystemInfoSync().windowWidth,
|
||||
scrollTimer = false,
|
||||
tabBar;
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
tabCurrentIndex: 0, //当前选项卡索引
|
||||
scrollLeft: 0, //顶部选项卡左滑距离
|
||||
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
||||
tabArr: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
o_index: {
|
||||
type: Number,
|
||||
default () {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
//tab切换
|
||||
async changeTab(e) {
|
||||
|
||||
if (scrollTimer) {
|
||||
//多次切换只执行最后一次
|
||||
clearTimeout(scrollTimer);
|
||||
scrollTimer = false;
|
||||
}
|
||||
let index = e;
|
||||
//e=number为点击切换，e=object为swiper滑动切换
|
||||
if (typeof e === 'object') {
|
||||
index = e.detail.current
|
||||
}
|
||||
if (typeof tabBar !== 'object') {
|
||||
tabBar = await this.getElSize("nav-bar")
|
||||
}
|
||||
//计算宽度相关
|
||||
let tabBarScrollLeft = tabBar.scrollLeft;
|
||||
let width = 0;
|
||||
let nowWidth = 0;
|
||||
//获取可滑动总宽度
|
||||
for (let i = 0; i <= index; i++) {
|
||||
let result = await this.getElSize('tab' + i);
|
||||
width += result.width;
|
||||
if (i === index) {
|
||||
nowWidth = result.width;
|
||||
}
|
||||
}
|
||||
if (typeof e === 'number') {
|
||||
//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
|
||||
this.tabCurrentIndex = index;
|
||||
}
|
||||
// console.log("windowWidth = " + windowWidth);
|
||||
//延迟300ms,等待swiper动画结束再修改tabbar
|
||||
scrollTimer = setTimeout(() => {
|
||||
if (width - nowWidth / 2 > windowWidth / 2) {
|
||||
//如果当前项越过中心点，将其放在屏幕中心
|
||||
this.scrollLeft = width - nowWidth / 2 - windowWidth / 2;
|
||||
} else {
|
||||
this.scrollLeft = 0;
|
||||
}
|
||||
if (typeof e === 'object') {
|
||||
this.tabCurrentIndex = index;
|
||||
}
|
||||
this.tabCurrentIndex = index;
|
||||
|
||||
|
||||
|
||||
|
||||
}, 300)
|
||||
// console.log('changeTab is done!!!')
|
||||
this.$emit("tabChange", this.tabCurrentIndex);
|
||||
|
||||
},
|
||||
//获得元素的size
|
||||
getElSize(id) {
|
||||
return new Promise((res, rej) => {
|
||||
|
||||
// 在自定义组件中，使用wx.createSelectorQuery() 不能用wx. 而是this.createSelectorQuery()
|
||||
// 微信文档： 但是在uni的官方文档中并没有关于需要切换this的介绍，是用uni.createSelectorQuery()在自定义组件内部也是无效的。
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
let el = this.createSelectorQuery().select('#' + id);
|
||||
// #endif
|
||||
|
||||
// #ifdef H5 || APP-PLUS
|
||||
|
||||
let el = uni.createSelectorQuery().select('#' + id);
|
||||
|
||||
// #endif
|
||||
|
||||
el.fields({
|
||||
size: true,
|
||||
scrollOffset: true,
|
||||
rect: true
|
||||
}, (data) => {
|
||||
res(data);
|
||||
}).exec();
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.content {
|
||||
background-color: #f8f8f8;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 隐藏滚动条scrollbar */
|
||||
.nav-bar ::-webkit-scrollbar {
|
||||
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
/* 顶部tabbar */
|
||||
.nav-bar {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: 90upx;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
/* width: 150upx; */
|
||||
width: 50%;
|
||||
height: 90upx;
|
||||
text-align: center;
|
||||
line-height: 90upx;
|
||||
font-size: 30upx;
|
||||
color: #303133;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 4upx solid #26758d;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
transition: .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.current {
|
||||
color: #26758d;
|
||||
|
||||
&:after {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
85
uni_modules/cc-newsTabs/package.json
Normal file
85
uni_modules/cc-newsTabs/package.json
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "cc-newsTabs",
|
||||
"displayName": "自定义可自由滚动新闻栏tabs选项卡标签栏标题栏组件(适配vue3 小程序)",
|
||||
"version": "2.0",
|
||||
"description": "自定义可自由滚动新闻栏tabs选项卡标签栏标题栏组件(适配vue3 小程序)",
|
||||
"keywords": [
|
||||
"tabs",
|
||||
"新闻栏",
|
||||
"选项卡",
|
||||
"标题栏",
|
||||
"标签栏"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.8.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
132
uni_modules/cc-newsTabs/readme.md
Normal file
132
uni_modules/cc-newsTabs/readme.md
Normal file
@@ -0,0 +1,132 @@
|
||||
# cc-newsTabs
|
||||
|
||||
|
||||
#### 使用方法
|
||||
```使用方法
|
||||
<!-- tabArr：tab数组 tabChange：标签栏切换 -->
|
||||
<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
|
||||
|
||||
//初始化数据
|
||||
tabArr: [{
|
||||
name: '关注',
|
||||
id: '1',
|
||||
},
|
||||
{
|
||||
name: '推荐',
|
||||
id: '2'
|
||||
},
|
||||
{
|
||||
name: '体育',
|
||||
id: '3'
|
||||
},
|
||||
{
|
||||
name: '热点',
|
||||
id: '4'
|
||||
},
|
||||
{
|
||||
name: '财经',
|
||||
id: '5'
|
||||
},
|
||||
{
|
||||
name: '娱乐',
|
||||
id: '6'
|
||||
},
|
||||
{
|
||||
name: '军事',
|
||||
id: '7'
|
||||
},
|
||||
{
|
||||
name: '历史',
|
||||
id: '8'
|
||||
},
|
||||
{
|
||||
name: '本地',
|
||||
id: '9'
|
||||
}],
|
||||
|
||||
// tab标签栏改变事件
|
||||
tabChange(currentIndex) {
|
||||
|
||||
uni.showModal({
|
||||
title: "当前选择序列",
|
||||
content: "当前选择序列 = " + currentIndex
|
||||
})
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
#### HTML代码实现部分
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<!-- tabArr：tab数组 tabChange：标签栏切换 -->
|
||||
<cc-newsTabs :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
tabArr: [{
|
||||
name: '关注',
|
||||
id: '1',
|
||||
}, {
|
||||
name: '推荐',
|
||||
id: '2'
|
||||
}, {
|
||||
name: '体育',
|
||||
id: '3'
|
||||
}, {
|
||||
name: '热点',
|
||||
id: '4'
|
||||
}, {
|
||||
name: '财经',
|
||||
id: '5'
|
||||
}, {
|
||||
name: '娱乐',
|
||||
id: '6'
|
||||
}, {
|
||||
name: '军事',
|
||||
id: '7'
|
||||
}, {
|
||||
name: '历史',
|
||||
id: '8'
|
||||
}, {
|
||||
name: '本地',
|
||||
id: '9'
|
||||
}],
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
tabChange(currentIndex) {
|
||||
|
||||
uni.showModal({
|
||||
title: "当前选择序列",
|
||||
content: "当前选择序列 = " + currentIndex
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page,
|
||||
.content {
|
||||
background-color: #f8f8f8;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user