Feat：去除多余的组件，减少打包体积
This commit is contained in:
linxi
@@ -1,25 +0,0 @@
|
||||
## 1.0.1（2022-06-14）
|
||||
1.优化代码
|
||||
## 1.0.0（2022-06-03）
|
||||
### 可能为全网最好用的分类插件：侧边导航分类插件【亲测可用：2022-06-02 23:09】
|
||||
|
||||
##### 请直接把代码复制到页面直接使用。
|
||||
````
|
||||
学习方法最重要，仔细看下也好理解，不难。
|
||||
|
||||
|
||||
像这种分类联动 页面，直接把代码里的文件复制出来吧。自定义样式，看看代码你也能看懂
|
||||
有时间改成插件模式
|
||||
|
||||
````
|
||||
|
||||
````
|
||||
此插件功能
|
||||
1.已实现：右边滑动，左边同步滚动到对应位置
|
||||
2.已实现：左边菜单滚动，右边同事滚动到对应位置
|
||||
3.已实现：当右边滑动顶部时，左侧置顶。其他时候始终保持在置顶第二块位置
|
||||
4.左侧一级分类；右侧二级分类 全部都可自定义
|
||||
5.使用2个swiper，卡顿延迟降低到极低
|
||||
6.连续滚动 ：跳转下一个分类 几乎无卡顿
|
||||
|
||||
````
|
||||
@@ -1,478 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view id="headinga">
|
||||
<!-- <view class="fixed">
|
||||
<cu-custom :isBack="true" bgColor=" text-white">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">垂直导航 {{list_data_left.length}}</block>
|
||||
</cu-custom>
|
||||
</view> -->
|
||||
<view
|
||||
style="width: 100%;height: 400rpx;background-color: pink;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 80rpx;">
|
||||
当前高度：{{my_hua_dong_num}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- navScroll -->
|
||||
<!-- navNow -->
|
||||
<view style="background-color: #fff;display: flex;">
|
||||
<view style="width: 20%;background-color: #fff;">
|
||||
<swiper :duration="500"
|
||||
:vertical="true"
|
||||
:display-multiple-items="navCount"
|
||||
:style="'height:'+hh+'px'"
|
||||
:current-item-id="navScroll"
|
||||
>
|
||||
<swiper-item v-for="item,index in navList" :key="index" class=""
|
||||
:item-id="item.navId"
|
||||
>
|
||||
<view class=""
|
||||
:style="navNow==item.navId?'background-color:red;':'background-color: #9bf;'"
|
||||
style="width: 100%;height: 100rpx;margin-top: 20rpx;height: 80rpx;line-height: 80rpx;display: flex;align-items: center;justify-content: center;color: #fff;"
|
||||
@click="onNav(item,item.navId)">
|
||||
<!-- {{navNow}}-{{item.navId}} -->
|
||||
{{item.navId}}
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
|
||||
<scroll-view
|
||||
:scroll-y="true"
|
||||
:scroll-with-animation="true"
|
||||
:enable-back-to-top="true"
|
||||
:style="'height:'+hh+'px'"
|
||||
:scroll-into-view="scrollintoview"
|
||||
@scroll="myonPageScroll"
|
||||
>
|
||||
<view v-for="(item,index) in mainList" :key="index"
|
||||
:id="item.navId"
|
||||
:data-nav-id="item.navId"
|
||||
:data-nav-scroll-id="item.navScrollId"
|
||||
class="trip main-item"
|
||||
style="margin-bottom: 10rpx; border-radius: 0rpx;border: 0rpx solid red;padding: 20rpx 30rpx 0 30rpx;">
|
||||
<view style="width: 100%;;display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<view style="width: 100%;height: 50rpx;;display: flex;align-items: center;" >冰激凌{{item.navId}}</view>
|
||||
<view style="width: 30%;height: 170rpx;background-color: #f2f2f2;margin-top: 20rpx;overflow: hidden;border-radius: 25rpx;position: relative;"
|
||||
v-for="(item_find,index_find) in 9" :key="index_find">
|
||||
<!-- 自定义页面布局start -->
|
||||
<!-- 自定义页面布局start -->
|
||||
<!-- 自定义页面布局start -->
|
||||
|
||||
<!-- <view style="width: 100%;height: 60rpx;line-height: 60rpx;background-color: #ccc;position: absolute;bottom: 0rpx;color: red;
|
||||
display: flex;align-items: center;justify-content: center;z-index: 99;opacity: 0.5;">
|
||||
早餐
|
||||
</view> -->
|
||||
<view style="width: 170rpx;height: 170rpx;background-color: pink;">
|
||||
<image v-if="index%3==0" src="../../static/icon_img/bing.png" style="width: 170rpx;height: 170rpx;"></image>
|
||||
<image v-if="index%3==1" src="../../static/icon_img/mangguo.png" style="width: 170rpx;height: 170rpx;"></image>
|
||||
<image v-if="index%3==2" src="../../static/icon_img/xigua.png" style="width: 170rpx;height: 170rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
|
||||
<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
|
||||
<!-- 自定义页面布局end -->
|
||||
<!-- 自定义页面布局end -->
|
||||
<!-- 自定义页面布局end -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- -->
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list_data_right:[],
|
||||
list_data_left:[],
|
||||
list: [],
|
||||
tabCur: 0,
|
||||
mainCur: 0,
|
||||
verticalNavTop: 0,
|
||||
load: true,
|
||||
|
||||
|
||||
heightleft:100,
|
||||
|
||||
|
||||
hh:0,
|
||||
scrolltop:0,
|
||||
scrollintoview:'',
|
||||
|
||||
|
||||
mainList:[],
|
||||
navList:[],
|
||||
|
||||
navCount:0,
|
||||
navNow:0,
|
||||
vue_all_list:[],
|
||||
|
||||
my_hua_dong_num:0,
|
||||
|
||||
|
||||
navScroll:''
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
onLoad() {
|
||||
|
||||
// mainList.push({
|
||||
|
||||
// })
|
||||
|
||||
|
||||
//
|
||||
// this.list_data_right_api()
|
||||
this.list_data_left_api()
|
||||
|
||||
|
||||
//
|
||||
|
||||
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
let list = [{}];
|
||||
for (let i = 0; i < 26; i++) {
|
||||
list[i] = {};
|
||||
list[i].name = String.fromCharCode(65 + i);
|
||||
list[i].id = i;
|
||||
}
|
||||
this.list = list;
|
||||
this.listCur = list[0];
|
||||
},
|
||||
onReady() {
|
||||
this._onReadyApi()
|
||||
uni.hideLoading()
|
||||
},
|
||||
methods: {
|
||||
myonPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
|
||||
console.log('___________________________________________________start');
|
||||
// console.log('00000000000000000000000000000000');
|
||||
// console.log(e);
|
||||
this.my_hua_dong_num = Math.round(e.detail.scrollTop).toString()
|
||||
// console.log(this.vue_all_list);
|
||||
|
||||
var num = e.currentTarget.offsetTop + e.detail.scrollTop
|
||||
// var num = e.detail.scrollTop
|
||||
|
||||
console.log("滚动距离为：" + num);
|
||||
// console.log("滚动距离为：" + num);
|
||||
|
||||
var ww = this.vue_all_list.find(
|
||||
v => v.top >= num
|
||||
)
|
||||
|
||||
console.log('+++++++++++++++')
|
||||
console.log(this.vue_all_list)
|
||||
console.log('_________ww____________________')
|
||||
console.log(ww)
|
||||
console.log('+++++++++++++++')
|
||||
// console.log(ww)
|
||||
|
||||
if (e.detail.scrollTop<=70) {
|
||||
|
||||
// console.log(this.navList[0].navId)
|
||||
// return
|
||||
this.navNow = this.navList[0].navId
|
||||
} else {
|
||||
this.navNow = ww.id
|
||||
}
|
||||
|
||||
if (ww.dataset.navScrollId) {
|
||||
this.navScroll = ww.dataset.navScrollId
|
||||
} else {
|
||||
this.navScroll = this.navNow
|
||||
}
|
||||
// console.log(ww.dataset.navScrollId)
|
||||
// this.navScroll = ww.dataset.qq
|
||||
|
||||
|
||||
console.log('navNow_____________='+this.navNow)
|
||||
console.log('navScroll_____________='+this.navScroll)
|
||||
|
||||
// this.navScroll =
|
||||
// console.log(ww.id)
|
||||
|
||||
// console.log('+++++++++++++++')
|
||||
// ww.dataset
|
||||
|
||||
// this.scrollStates.mainItems.find(
|
||||
// v => v.top >= top)
|
||||
console.log('___________________________________________________end');
|
||||
|
||||
},
|
||||
TabSelect(e) {
|
||||
this.tabCur = e.currentTarget.dataset.id;
|
||||
this.mainCur = e.currentTarget.dataset.id;
|
||||
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
|
||||
},
|
||||
VerticalMain(e) {
|
||||
// #ifdef MP-ALIPAY
|
||||
return false //支付宝小程序暂时不支持双向联动
|
||||
// #endif
|
||||
let that = this;
|
||||
let tabHeight = 0;
|
||||
if (this.load) {
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
|
||||
view.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
this.list[i].top = tabHeight;
|
||||
tabHeight = tabHeight + data.height;
|
||||
this.list[i].bottom = tabHeight;
|
||||
}).exec();
|
||||
}
|
||||
this.load = false
|
||||
}
|
||||
let scrollTop = e.detail.scrollTop + 10;
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
|
||||
this.verticalNavTop = (this.list[i].id - 1) * 50
|
||||
this.tabCur = this.list[i].id
|
||||
console.log(scrollTop)
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
list_data_left_api() {
|
||||
var that = this
|
||||
//mainList
|
||||
var mainList = []
|
||||
var navList = []
|
||||
// navList
|
||||
var list_data_left = []
|
||||
var navScrollId = ''
|
||||
|
||||
let prevNav = ''
|
||||
|
||||
var i=0
|
||||
for(i ; i<25 ; i++) {
|
||||
const mainId = 'main-'+i
|
||||
const navId = 'nav-'+i
|
||||
const tId = (10000+i).toString()
|
||||
|
||||
if (!prevNav) {
|
||||
prevNav = navId
|
||||
}
|
||||
|
||||
mainList.push({
|
||||
id:mainId,
|
||||
navId:navId,
|
||||
navScrollId:prevNav,
|
||||
data:{
|
||||
id:tId,
|
||||
start:'呵呵',
|
||||
name:tId,
|
||||
}
|
||||
})
|
||||
|
||||
navList.push({
|
||||
navId:navId,
|
||||
mainId:mainId,
|
||||
label:tId
|
||||
})
|
||||
|
||||
prevNav = navId
|
||||
|
||||
// list_data_left.push({
|
||||
// id:(10000+i).toString(),
|
||||
// start:'呵呵',
|
||||
// name:(10000+i).toString(),
|
||||
// })
|
||||
}
|
||||
|
||||
this.mainList = mainList
|
||||
this.navList = navList
|
||||
// this.list_data_left = list_data_left
|
||||
|
||||
console.log(this.navList)
|
||||
console.log(this.mainList)
|
||||
|
||||
this.navNow = this.navList[0].navId
|
||||
|
||||
|
||||
// uni.createSelectorQuery().selectAll('.main-item').fields({
|
||||
// // id:true,
|
||||
// id:true
|
||||
// // dataset:true,
|
||||
// // rect:true,
|
||||
|
||||
// }).exec(res=>{
|
||||
// console.log('---------------------------')
|
||||
// console.log('------------------33---------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log(res)
|
||||
// })
|
||||
|
||||
// return
|
||||
|
||||
|
||||
setTimeout(function(){
|
||||
wx.createSelectorQuery().selectAll('.main-item').fields({
|
||||
// id:true,
|
||||
id:true,
|
||||
dataset:true,
|
||||
rect:true,
|
||||
}).exec(res=>{
|
||||
console.log('---------------------------')
|
||||
console.log('---------------------------')
|
||||
|
||||
console.log('---------------------------')
|
||||
console.log('---------------------------')
|
||||
console.log(res[0])
|
||||
|
||||
that.vue_all_list = res[0]
|
||||
|
||||
console.log(that.vue_all_list)
|
||||
console.log('---------------------------vue_all_list_end')
|
||||
})
|
||||
// uni.createSelectorQuery().selectAll('.mmmm').fields({
|
||||
// // id:true,
|
||||
// size:true
|
||||
// // dataset:true,
|
||||
// // rect:true,
|
||||
// }).exec(res=>{
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log(res)
|
||||
// })
|
||||
},300)
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
list_data_right_api() {
|
||||
var list_data_right = []
|
||||
|
||||
var i=0
|
||||
for(i;i<100;i++) {
|
||||
list_data_right.push({
|
||||
id:(10000+i).toString(),
|
||||
start:'呵呵'
|
||||
})
|
||||
}
|
||||
|
||||
this.list_data_right = list_data_right
|
||||
|
||||
console.log(this.list_data_right)
|
||||
|
||||
},
|
||||
onNav(e,kk) {
|
||||
console.log('________________onNav___'+kk)
|
||||
console.log('________________onNav___'+kk)
|
||||
console.log('________________onNav___'+kk)
|
||||
console.log('________________onNav___'+kk)
|
||||
console.log('________________onNav___'+kk)
|
||||
var value = e.navId
|
||||
console.log(e)
|
||||
|
||||
if (e) {
|
||||
this.scrollintoview = value
|
||||
|
||||
this.navNow = kk
|
||||
}
|
||||
|
||||
},
|
||||
_onReadyApi() {
|
||||
console.log('--------------------------------')
|
||||
|
||||
var windowHeight = uni.getSystemInfoSync().windowHeight
|
||||
console.log(windowHeight)
|
||||
var that = this
|
||||
uni.createSelectorQuery().select('#headinga').boundingClientRect((res) => {
|
||||
console.log('+++++++++++++++')
|
||||
console.log('+++++++++++++++')
|
||||
|
||||
|
||||
that.hh = windowHeight - res.height
|
||||
|
||||
that.navCount = Math.round(that.hh/50)
|
||||
// console.log()
|
||||
console.log(that.navCount+'+++++++++++++++'+that.hh)
|
||||
// this.editorCtx = res.context
|
||||
}).exec()
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* .aaaa{ */
|
||||
|
||||
/* } */
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.VerticalNav.nav {
|
||||
width: 200upx;
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
.VerticalNav.nav .cu-item {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.VerticalNav.nav .cu-item.cur {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.VerticalNav.nav .cu-item.cur::after {
|
||||
content: "";
|
||||
width: 8upx;
|
||||
height: 30upx;
|
||||
border-radius: 10upx 0 0 10upx;
|
||||
position: absolute;
|
||||
background-color: currentColor;
|
||||
top: 0;
|
||||
right: 0upx;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.VerticalBox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.VerticalMain {
|
||||
background-color: #f1f1f1;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,478 +0,0 @@
|
||||
<template>
|
||||
<view>
|
||||
<view id="headinga">
|
||||
<!-- <view class="fixed">
|
||||
<cu-custom :isBack="true" bgColor=" text-white">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">垂直导航 {{list_data_left.length}}</block>
|
||||
</cu-custom>
|
||||
</view> -->
|
||||
<view
|
||||
style="width: 100%;height: 400rpx;background-color: pink;display: flex;justify-content: center;align-items: center;color: #fff;font-size: 80rpx;">
|
||||
当前高度：{{my_hua_dong_num}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- navScroll -->
|
||||
<!-- navNow -->
|
||||
<view style="background-color: #fff;display: flex;">
|
||||
<view style="width: 20%;background-color: #fff;">
|
||||
<swiper :duration="500"
|
||||
:vertical="true"
|
||||
:display-multiple-items="navCount"
|
||||
:style="'height:'+hh+'px'"
|
||||
:current-item-id="navScroll"
|
||||
>
|
||||
<swiper-item v-for="item,index in navList" :key="index" class=""
|
||||
:item-id="item.navId"
|
||||
>
|
||||
<view class=""
|
||||
:style="navNow==item.navId?'background-color:red;':'background-color: #9bf;'"
|
||||
style="width: 100%;height: 100rpx;margin-top: 20rpx;height: 80rpx;line-height: 80rpx;display: flex;align-items: center;justify-content: center;color: #fff;"
|
||||
@click="onNav(item,item.navId)">
|
||||
<!-- {{navNow}}-{{item.navId}} -->
|
||||
{{item.navId}}
|
||||
</view>
|
||||
</swiper-item>
|
||||
|
||||
</swiper>
|
||||
</view>
|
||||
|
||||
|
||||
<scroll-view
|
||||
:scroll-y="true"
|
||||
:scroll-with-animation="true"
|
||||
:enable-back-to-top="true"
|
||||
:style="'height:'+hh+'px'"
|
||||
:scroll-into-view="scrollintoview"
|
||||
@scroll="myonPageScroll"
|
||||
>
|
||||
<view v-for="(item,index) in mainList" :key="index"
|
||||
:id="item.navId"
|
||||
:data-nav-id="item.navId"
|
||||
:data-nav-scroll-id="item.navScrollId"
|
||||
class="trip main-item"
|
||||
style="margin-bottom: 10rpx; border-radius: 0rpx;border: 0rpx solid red;padding: 20rpx 30rpx 0 30rpx;">
|
||||
<view style="width: 100%;;display: flex;flex-wrap: wrap;justify-content: space-between;">
|
||||
<view style="width: 100%;height: 50rpx;;display: flex;align-items: center;" >冰激凌{{item.navId}}</view>
|
||||
<view style="width: 30%;height: 170rpx;background-color: #f2f2f2;margin-top: 20rpx;overflow: hidden;border-radius: 25rpx;position: relative;"
|
||||
v-for="(item_find,index_find) in 9" :key="index_find">
|
||||
<!-- 自定义页面布局start -->
|
||||
<!-- 自定义页面布局start -->
|
||||
<!-- 自定义页面布局start -->
|
||||
|
||||
<!-- <view style="width: 100%;height: 60rpx;line-height: 60rpx;background-color: #ccc;position: absolute;bottom: 0rpx;color: red;
|
||||
display: flex;align-items: center;justify-content: center;z-index: 99;opacity: 0.5;">
|
||||
早餐
|
||||
</view> -->
|
||||
<view style="width: 170rpx;height: 170rpx;background-color: pink;">
|
||||
<image v-if="index%3==0" src="../../static/icon_img/bing.png" style="width: 170rpx;height: 170rpx;"></image>
|
||||
<image v-if="index%3==1" src="../../static/icon_img/mangguo.png" style="width: 170rpx;height: 170rpx;"></image>
|
||||
<image v-if="index%3==2" src="../../static/icon_img/xigua.png" style="width: 170rpx;height: 170rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
|
||||
<view style="width: 170rpx;height: 0rpx;margin-bottom: 20rpx;"></view>
|
||||
<!-- 自定义页面布局end -->
|
||||
<!-- 自定义页面布局end -->
|
||||
<!-- 自定义页面布局end -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- -->
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list_data_right:[],
|
||||
list_data_left:[],
|
||||
list: [],
|
||||
tabCur: 0,
|
||||
mainCur: 0,
|
||||
verticalNavTop: 0,
|
||||
load: true,
|
||||
|
||||
|
||||
heightleft:100,
|
||||
|
||||
|
||||
hh:0,
|
||||
scrolltop:0,
|
||||
scrollintoview:'',
|
||||
|
||||
|
||||
mainList:[],
|
||||
navList:[],
|
||||
|
||||
navCount:0,
|
||||
navNow:0,
|
||||
vue_all_list:[],
|
||||
|
||||
my_hua_dong_num:0,
|
||||
|
||||
|
||||
navScroll:''
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
onLoad() {
|
||||
|
||||
// mainList.push({
|
||||
|
||||
// })
|
||||
|
||||
|
||||
//
|
||||
// this.list_data_right_api()
|
||||
this.list_data_left_api()
|
||||
|
||||
|
||||
//
|
||||
|
||||
|
||||
uni.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true
|
||||
});
|
||||
let list = [{}];
|
||||
for (let i = 0; i < 26; i++) {
|
||||
list[i] = {};
|
||||
list[i].name = String.fromCharCode(65 + i);
|
||||
list[i].id = i;
|
||||
}
|
||||
this.list = list;
|
||||
this.listCur = list[0];
|
||||
},
|
||||
onReady() {
|
||||
this._onReadyApi()
|
||||
uni.hideLoading()
|
||||
},
|
||||
methods: {
|
||||
myonPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
|
||||
console.log('___________________________________________________start');
|
||||
// console.log('00000000000000000000000000000000');
|
||||
// console.log(e);
|
||||
this.my_hua_dong_num = Math.round(e.detail.scrollTop).toString()
|
||||
// console.log(this.vue_all_list);
|
||||
|
||||
var num = e.currentTarget.offsetTop + e.detail.scrollTop
|
||||
// var num = e.detail.scrollTop
|
||||
|
||||
console.log("滚动距离为：" + num);
|
||||
// console.log("滚动距离为：" + num);
|
||||
|
||||
var ww = this.vue_all_list.find(
|
||||
v => v.top >= num
|
||||
)
|
||||
|
||||
console.log('+++++++++++++++')
|
||||
console.log(this.vue_all_list)
|
||||
console.log('_________ww____________________')
|
||||
console.log(ww)
|
||||
console.log('+++++++++++++++')
|
||||
// console.log(ww)
|
||||
|
||||
if (e.detail.scrollTop<=70) {
|
||||
|
||||
// console.log(this.navList[0].navId)
|
||||
// return
|
||||
this.navNow = this.navList[0].navId
|
||||
} else {
|
||||
this.navNow = ww.id
|
||||
}
|
||||
|
||||
if (ww.dataset.navScrollId) {
|
||||
this.navScroll = ww.dataset.navScrollId
|
||||
} else {
|
||||
this.navScroll = this.navNow
|
||||
}
|
||||
// console.log(ww.dataset.navScrollId)
|
||||
// this.navScroll = ww.dataset.qq
|
||||
|
||||
|
||||
console.log('navNow_____________='+this.navNow)
|
||||
console.log('navScroll_____________='+this.navScroll)
|
||||
|
||||
// this.navScroll =
|
||||
// console.log(ww.id)
|
||||
|
||||
// console.log('+++++++++++++++')
|
||||
// ww.dataset
|
||||
|
||||
// this.scrollStates.mainItems.find(
|
||||
// v => v.top >= top)
|
||||
console.log('___________________________________________________end');
|
||||
|
||||
},
|
||||
TabSelect(e) {
|
||||
this.tabCur = e.currentTarget.dataset.id;
|
||||
this.mainCur = e.currentTarget.dataset.id;
|
||||
this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
|
||||
},
|
||||
VerticalMain(e) {
|
||||
// #ifdef MP-ALIPAY
|
||||
return false //支付宝小程序暂时不支持双向联动
|
||||
// #endif
|
||||
let that = this;
|
||||
let tabHeight = 0;
|
||||
if (this.load) {
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
|
||||
view.fields({
|
||||
size: true
|
||||
}, data => {
|
||||
this.list[i].top = tabHeight;
|
||||
tabHeight = tabHeight + data.height;
|
||||
this.list[i].bottom = tabHeight;
|
||||
}).exec();
|
||||
}
|
||||
this.load = false
|
||||
}
|
||||
let scrollTop = e.detail.scrollTop + 10;
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
|
||||
this.verticalNavTop = (this.list[i].id - 1) * 50
|
||||
this.tabCur = this.list[i].id
|
||||
console.log(scrollTop)
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
list_data_left_api() {
|
||||
var that = this
|
||||
//mainList
|
||||
var mainList = []
|
||||
var navList = []
|
||||
// navList
|
||||
var list_data_left = []
|
||||
var navScrollId = ''
|
||||
|
||||
let prevNav = ''
|
||||
|
||||
var i=0
|
||||
for(i ; i<25 ; i++) {
|
||||
const mainId = 'main-'+i
|
||||
const navId = 'nav-'+i
|
||||
const tId = (10000+i).toString()
|
||||
|
||||
if (!prevNav) {
|
||||
prevNav = navId
|
||||
}
|
||||
|
||||
mainList.push({
|
||||
id:mainId,
|
||||
navId:navId,
|
||||
navScrollId:prevNav,
|
||||
data:{
|
||||
id:tId,
|
||||
start:'呵呵',
|
||||
name:tId,
|
||||
}
|
||||
})
|
||||
|
||||
navList.push({
|
||||
navId:navId,
|
||||
mainId:mainId,
|
||||
label:tId
|
||||
})
|
||||
|
||||
prevNav = navId
|
||||
|
||||
// list_data_left.push({
|
||||
// id:(10000+i).toString(),
|
||||
// start:'呵呵',
|
||||
// name:(10000+i).toString(),
|
||||
// })
|
||||
}
|
||||
|
||||
this.mainList = mainList
|
||||
this.navList = navList
|
||||
// this.list_data_left = list_data_left
|
||||
|
||||
console.log(this.navList)
|
||||
console.log(this.mainList)
|
||||
|
||||
this.navNow = this.navList[0].navId
|
||||
|
||||
|
||||
// uni.createSelectorQuery().selectAll('.main-item').fields({
|
||||
// // id:true,
|
||||
// id:true
|
||||
// // dataset:true,
|
||||
// // rect:true,
|
||||
|
||||
// }).exec(res=>{
|
||||
// console.log('---------------------------')
|
||||
// console.log('------------------33---------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log(res)
|
||||
// })
|
||||
|
||||
// return
|
||||
|
||||
|
||||
setTimeout(function(){
|
||||
wx.createSelectorQuery().selectAll('.main-item').fields({
|
||||
// id:true,
|
||||
id:true,
|
||||
dataset:true,
|
||||
rect:true,
|
||||
}).exec(res=>{
|
||||
console.log('---------------------------')
|
||||
console.log('---------------------------')
|
||||
|
||||
console.log('---------------------------')
|
||||
console.log('---------------------------')
|
||||
console.log(res[0])
|
||||
|
||||
that.vue_all_list = res[0]
|
||||
|
||||
console.log(that.vue_all_list)
|
||||
console.log('---------------------------vue_all_list_end')
|
||||
})
|
||||
// uni.createSelectorQuery().selectAll('.mmmm').fields({
|
||||
// // id:true,
|
||||
// size:true
|
||||
// // dataset:true,
|
||||
// // rect:true,
|
||||
// }).exec(res=>{
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log('---------------------------')
|
||||
// console.log(res)
|
||||
// })
|
||||
},300)
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
list_data_right_api() {
|
||||
var list_data_right = []
|
||||
|
||||
var i=0
|
||||
for(i;i<100;i++) {
|
||||
list_data_right.push({
|
||||
id:(10000+i).toString(),
|
||||
start:'呵呵'
|
||||
})
|
||||
}
|
||||
|
||||
this.list_data_right = list_data_right
|
||||
|
||||
console.log(this.list_data_right)
|
||||
|
||||
},
|
||||
onNav(e,kk) {
|
||||
console.log('________________onNav___'+kk)
|
||||
console.log('________________onNav___'+kk)
|
||||
console.log('________________onNav___'+kk)
|
||||
console.log('________________onNav___'+kk)
|
||||
console.log('________________onNav___'+kk)
|
||||
var value = e.navId
|
||||
console.log(e)
|
||||
|
||||
if (e) {
|
||||
this.scrollintoview = value
|
||||
|
||||
this.navNow = kk
|
||||
}
|
||||
|
||||
},
|
||||
_onReadyApi() {
|
||||
console.log('--------------------------------')
|
||||
|
||||
var windowHeight = uni.getSystemInfoSync().windowHeight
|
||||
console.log(windowHeight)
|
||||
var that = this
|
||||
uni.createSelectorQuery().select('#headinga').boundingClientRect((res) => {
|
||||
console.log('+++++++++++++++')
|
||||
console.log('+++++++++++++++')
|
||||
|
||||
|
||||
that.hh = windowHeight - res.height
|
||||
|
||||
that.navCount = Math.round(that.hh/50)
|
||||
// console.log()
|
||||
console.log(that.navCount+'+++++++++++++++'+that.hh)
|
||||
// this.editorCtx = res.context
|
||||
}).exec()
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* .aaaa{ */
|
||||
|
||||
/* } */
|
||||
.fixed {
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.VerticalNav.nav {
|
||||
width: 200upx;
|
||||
white-space: initial;
|
||||
}
|
||||
|
||||
.VerticalNav.nav .cu-item {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.VerticalNav.nav .cu-item.cur {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.VerticalNav.nav .cu-item.cur::after {
|
||||
content: "";
|
||||
width: 8upx;
|
||||
height: 30upx;
|
||||
border-radius: 10upx 0 0 10upx;
|
||||
position: absolute;
|
||||
background-color: currentColor;
|
||||
top: 0;
|
||||
right: 0upx;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.VerticalBox {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.VerticalMain {
|
||||
background-color: #f1f1f1;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,10 +0,0 @@
|
||||
## 【2023-左侧联动分类插件-可能是最好用的插件】-全网唯一几乎无卡顿 [相对来说]
|
||||
## d-swiper-type
|
||||
|
||||
|
||||
````
|
||||
|
||||
直接复制组件代码到页面旧可以，不用使用组件，超简单，超丝滑~
|
||||
|
||||
|
||||
````
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 365 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 765 B |
Binary file not shown.
|
Before Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 626 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
@@ -1,89 +0,0 @@
|
||||
{
|
||||
"id": "d-swiper-type",
|
||||
"displayName": "2023_侧边联动导航滑动分类_【超流畅、超丝滑、全网唯一】国际庄邓",
|
||||
"version": "1.0.1",
|
||||
"description": "2023_侧边联动导航滑动分类_【超流畅、超丝滑、全网唯一】国际庄邓",
|
||||
"keywords": [
|
||||
"uni_modules",
|
||||
"联动侧边栏导航分类",
|
||||
"分类",
|
||||
"侧边",
|
||||
"联动"
|
||||
],
|
||||
"repository": "https://github.com/qq1415551519/uniapp-d-search-log",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.20"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"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": "u"
|
||||
},
|
||||
"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",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
## 【2023-左侧联动分类插件-可能是最好用的插件】-全网唯一几乎无卡顿【超丝滑~】
|
||||
## d-swiper-type
|
||||
|
||||
|
||||
````
|
||||
|
||||
弹框插件： https://ext.dcloud.net.cn/plugin?id=2708
|
||||
|
||||
日历插件： https://ext.dcloud.net.cn/plugin?id=2779
|
||||
|
||||
````
|
||||
|
||||
|
||||
|
||||
````
|
||||
|
||||
1. /pages/home/hometype.vue 为案例文件
|
||||
|
||||
|
||||
|
||||
````
|
||||
|
||||
### 下载插件后直接复制到自己页面使用。【直接复制代码】
|
||||
|
||||
````
|
||||
|
||||
1.文件路径：'@/uni_modules/d-swiper-type/components/d-swiper-type/pages/home/hometype.vue'
|
||||
2.复制图片目录 static/icon_img
|
||||
|
||||
````
|
||||
@@ -1,26 +0,0 @@
|
||||
## 1.2.3（2024-02-20）
|
||||
- 新增 支持控制小时，分钟的显隐：showHour showMinute
|
||||
## 1.2.2（2022-01-19）
|
||||
- 修复 在微信小程序中样式不生效的bug
|
||||
## 1.2.1（2022-01-18）
|
||||
- 新增 update 方法 ，在动态更新时间后，刷新组件
|
||||
## 1.2.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-countdown](https://uniapp.dcloud.io/component/uniui/uni-countdown)
|
||||
## 1.1.3（2021-10-18）
|
||||
- 重构
|
||||
- 新增 font-size 支持自定义字体大小
|
||||
## 1.1.2（2021-08-24）
|
||||
- 新增 支持国际化
|
||||
## 1.1.1（2021-07-30）
|
||||
- 优化 vue3下小程序事件警告的问题
|
||||
## 1.1.0（2021-07-30）
|
||||
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.0.5（2021-06-18）
|
||||
- 修复 uni-countdown 重复赋值跳两秒的 bug
|
||||
## 1.0.4（2021-05-12）
|
||||
- 新增 组件示例地址
|
||||
## 1.0.3（2021-05-08）
|
||||
- 修复 uni-countdown 不能控制倒计时的 bug
|
||||
## 1.0.2（2021-02-04）
|
||||
- 调整为uni_modules目录规范
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"uni-countdown.day": "day",
|
||||
"uni-countdown.h": "h",
|
||||
"uni-countdown.m": "m",
|
||||
"uni-countdown.s": "s"
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"uni-countdown.day": "天",
|
||||
"uni-countdown.h": "时",
|
||||
"uni-countdown.m": "分",
|
||||
"uni-countdown.s": "秒"
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"uni-countdown.day": "天",
|
||||
"uni-countdown.h": "時",
|
||||
"uni-countdown.m": "分",
|
||||
"uni-countdown.s": "秒"
|
||||
}
|
||||
@@ -1,281 +0,0 @@
|
||||
<template>
|
||||
<view class="uni-countdown">
|
||||
<text v-if="showDay" :style="[timeStyle]" class="uni-countdown__number">{{ d }}</text>
|
||||
<text v-if="showDay" :style="[splitorStyle]" class="uni-countdown__splitor">{{dayText}}</text>
|
||||
<text v-if="showHour" :style="[timeStyle]" class="uni-countdown__number">{{ h }}</text>
|
||||
<text v-if="showHour" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : hourText }}</text>
|
||||
<text v-if="showMinute" :style="[timeStyle]" class="uni-countdown__number">{{ i }}</text>
|
||||
<text v-if="showMinute" :style="[splitorStyle]" class="uni-countdown__splitor">{{ showColon ? ':' : minuteText }}</text>
|
||||
<text :style="[timeStyle]" class="uni-countdown__number">{{ s }}</text>
|
||||
<text v-if="!showColon" :style="[splitorStyle]" class="uni-countdown__splitor">{{secondText}}</text>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from './i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
/**
|
||||
* Countdown 倒计时
|
||||
* @description 倒计时组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=25
|
||||
* @property {String} backgroundColor 背景色
|
||||
* @property {String} color 文字颜色
|
||||
* @property {Number} day 天数
|
||||
* @property {Number} hour 小时
|
||||
* @property {Number} minute 分钟
|
||||
* @property {Number} second 秒
|
||||
* @property {Number} timestamp 时间戳
|
||||
* @property {Boolean} showDay = [true|false] 是否显示天数
|
||||
* @property {Boolean} showHour = [true|false] 是否显示小时
|
||||
* @property {Boolean} showMinute = [true|false] 是否显示分钟
|
||||
* @property {Boolean} show-colon = [true|false] 是否以冒号为分隔符
|
||||
* @property {String} splitorColor 分割符号颜色
|
||||
* @event {Function} timeup 倒计时时间到触发事件
|
||||
* @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
|
||||
*/
|
||||
export default {
|
||||
name: 'UniCountdown',
|
||||
emits: ['timeup'],
|
||||
props: {
|
||||
showDay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showHour: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showMinute: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showColon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
start: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 14
|
||||
},
|
||||
splitorColor: {
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
day: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
hour: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
minute: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
second: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
timestamp: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
syncFlag: false,
|
||||
d: '00',
|
||||
h: '00',
|
||||
i: '00',
|
||||
s: '00',
|
||||
leftTime: 0,
|
||||
seconds: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dayText() {
|
||||
return t("uni-countdown.day")
|
||||
},
|
||||
hourText(val) {
|
||||
return t("uni-countdown.h")
|
||||
},
|
||||
minuteText(val) {
|
||||
return t("uni-countdown.m")
|
||||
},
|
||||
secondText(val) {
|
||||
return t("uni-countdown.s")
|
||||
},
|
||||
timeStyle() {
|
||||
const {
|
||||
color,
|
||||
backgroundColor,
|
||||
fontSize
|
||||
} = this
|
||||
return {
|
||||
color,
|
||||
backgroundColor,
|
||||
fontSize: `${fontSize}px`,
|
||||
width: `${fontSize * 22 / 14}px`, // 按字体大小为 14px 时的比例缩放
|
||||
lineHeight: `${fontSize * 20 / 14}px`,
|
||||
borderRadius: `${fontSize * 3 / 14}px`,
|
||||
}
|
||||
},
|
||||
splitorStyle() {
|
||||
const { splitorColor, fontSize, backgroundColor } = this
|
||||
return {
|
||||
color: splitorColor,
|
||||
fontSize: `${fontSize * 12 / 14}px`,
|
||||
margin: backgroundColor ? `${fontSize * 4 / 14}px` : ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
day(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
hour(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
minute(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
second(val) {
|
||||
this.changeFlag()
|
||||
},
|
||||
start: {
|
||||
immediate: true,
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal) {
|
||||
this.startData();
|
||||
} else {
|
||||
if (!oldVal) return
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
created: function(e) {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
this.countDown()
|
||||
},
|
||||
// #ifndef VUE3
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
unmounted() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
toSeconds(timestamp, day, hours, minutes, seconds) {
|
||||
if (timestamp) {
|
||||
return timestamp - parseInt(new Date().getTime() / 1000, 10)
|
||||
}
|
||||
return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
|
||||
},
|
||||
timeUp() {
|
||||
clearInterval(this.timer)
|
||||
this.$emit('timeup')
|
||||
},
|
||||
countDown() {
|
||||
let seconds = this.seconds
|
||||
let [day, hour, minute, second] = [0, 0, 0, 0]
|
||||
if (seconds > 0) {
|
||||
day = Math.floor(seconds / (60 * 60 * 24))
|
||||
hour = Math.floor(seconds / (60 * 60)) - (day * 24)
|
||||
minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60)
|
||||
second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
|
||||
} else {
|
||||
this.timeUp()
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
if (hour < 10) {
|
||||
hour = '0' + hour
|
||||
}
|
||||
if (minute < 10) {
|
||||
minute = '0' + minute
|
||||
}
|
||||
if (second < 10) {
|
||||
second = '0' + second
|
||||
}
|
||||
this.d = day
|
||||
this.h = hour
|
||||
this.i = minute
|
||||
this.s = second
|
||||
},
|
||||
startData() {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
if (this.seconds <= 0) {
|
||||
this.seconds = this.toSeconds(0, 0, 0, 0, 0)
|
||||
this.countDown()
|
||||
return
|
||||
}
|
||||
clearInterval(this.timer)
|
||||
this.countDown()
|
||||
this.timer = setInterval(() => {
|
||||
this.seconds--
|
||||
if (this.seconds < 0) {
|
||||
this.timeUp()
|
||||
return
|
||||
}
|
||||
this.countDown()
|
||||
}, 1000)
|
||||
},
|
||||
update(){
|
||||
this.startData();
|
||||
},
|
||||
changeFlag() {
|
||||
if (!this.syncFlag) {
|
||||
this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
|
||||
this.startData();
|
||||
this.syncFlag = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
$font-size: 14px;
|
||||
|
||||
.uni-countdown {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
&__splitor {
|
||||
margin: 0 2px;
|
||||
font-size: $font-size;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&__number {
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: $font-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,83 +0,0 @@
|
||||
{
|
||||
"id": "uni-countdown",
|
||||
"displayName": "uni-countdown 倒计时",
|
||||
"version": "1.2.3",
|
||||
"description": "CountDown 倒计时组件",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"countdown",
|
||||
"倒计时"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"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"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
|
||||
|
||||
## CountDown 倒计时
|
||||
> **组件名：uni-countdown**
|
||||
> 代码块： `uCountDown`
|
||||
|
||||
倒计时组件。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-countdown)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
Reference in New Issue
Block a user