提交 f96d2c8b 编写于 作者: H hdx

feat: swiper-list

上级 9d21f4c5
......@@ -689,6 +689,12 @@
"navigationBarTitleText": "详情示例"
}
},
{
"path": "pages/template/swiper-list/swiper-list",
"style": {
"navigationBarTitleText": "swiper-list"
}
},
{
"path": "pages/template/swiper-vertical-video/swiper-vertical-video",
"style": {
......
......@@ -106,7 +106,7 @@ export default {
url: 'swiper-list',
name: 'swiper-list',
open: false,
enable: false,
enable: true,
pages: [] as Page[],
},
{
......
<template>
<view class="swiper-list">
<scroll-view class="swiper-tabs" :scroll-left="tabsScrollLeft" :scroll-x="true" :show-scrollbar="false">
<view>
<view class="flex-row">
<view class="swiper-tabs-item" v-for="(item, index) in swiperList" :id="'swipertab' + index" ref="swipertab"
:key="index" @click="onTabClick(index)">
<text class="swiper-tabs-item-text"
:class="swiperIndex==index ? 'uni-tab-item-title-active' : ''">{{item.title}}</text>
</view>
</view>
<view class="swiper-tabs-indicator">
<view class="swiper-tabs-underline"
:style="{left: swiperIndicatorLineLeft + 'px', width: swiperIndicatorLineWidth + 'px'}"></view>
</view>
</view>
</scroll-view>
<swiper class="swiper-view" ref="swiper" :current="swiperIndex" :duration="300" @change="onSwiperChange"
@transition="onSwiperTransition" @animationfinish="onSwiperAnimationfinish">
<swiper-item class="swiper-item" v-for="(_, index) in swiperList" :key="index">
<text class="swiper-item-text">{{index}}</text>
</swiper-item>
</swiper>
</view>
</template>
<script>
type SwiperTabsItem = {
left : number,
width : number
}
type SwiperViewItem = {
title : string
}
export default {
data() {
return {
swiperList: [] as SwiperViewItem[],
swiperIndex: -1,
tabsScrollLeft: 0,
swiperIndicatorLineLeft: 0,
swiperIndicatorLineWidth: 0,
$lastSwiperIndex: 0,
$swiperWidth: 0,
$swiperTabsRect: [] as SwiperTabsItem[],
$isTap: false
}
},
onLoad() {
for (let i = 0; i < 8; i++) {
this.swiperList.push({
title: "TAB " + i
} as SwiperViewItem)
}
},
onReady() {
this.$swiperWidth = (this.$refs["swiper"]! as INode)!?.offsetWidth! as number;
this.queryTabItemsSize();
this.setSwiperIndex(0, true);
},
methods: {
onTabClick(index : number) {
this.setSwiperIndex(index, false);
},
onSwiperChange(e : SwiperChangeEvent) {
this.setSwiperIndex(e.detail.current, false);
console.log("onSwiperChange", e.detail.current);
},
onSwiperTransition(e : SwiperTransitionEvent) {
const offsetX = e.detail.dx;
let moveToIndex = offsetX > 0 ? this.$lastSwiperIndex + 1 : this.$lastSwiperIndex - 1
if (moveToIndex < 0) { moveToIndex = 0 }
if (moveToIndex > this.$swiperTabsRect.length - 1) { moveToIndex = this.$swiperTabsRect.length - 1 }
const percentage = Math.abs(offsetX) / this.$swiperWidth;
const currentSize = this.$swiperTabsRect[this.$lastSwiperIndex];
const moveToSize = this.$swiperTabsRect[moveToIndex];
const indicatorlineL = currentSize.left + (moveToSize.left - currentSize.left) * percentage;
const indicatorlineW = currentSize.width + (moveToSize.width - currentSize.width) * percentage;
this.updateTabIndicator(indicatorlineL, indicatorlineW);
//console.log(this.$lastSwiperIndex, moveToIndex, offsetX, this.$swiperWidth, percentage);
},
// TODO 事件触发时机不对
onSwiperAnimationfinish(e : SwiperAnimationFinishEvent) {
this.$lastSwiperIndex = e.detail.current;
console.log("onSwiperAnimationfinish", e.detail.current);
// this.setSwiperIndex(e.detail.current, true);
},
queryTabItemsSize() {
this.$swiperTabsRect.length = 0;
const tabs = this.$refs["swipertab"] as INode[]
tabs.forEach((node) => {
this.$swiperTabsRect.push({
left: node.offsetLeft as number,
width: node.offsetWidth as number
} as SwiperTabsItem)
})
},
setSwiperIndex(index : Number, updateIndicator : Boolean) {
if (this.swiperIndex === index) {
return;
}
this.swiperIndex = index;
if (updateIndicator) {
this.updateTabIndicator(this.$swiperTabsRect[index].left, this.$swiperTabsRect[index].width);
}
},
updateTabIndicator(left : Number, width : Number) {
this.swiperIndicatorLineLeft = left;
this.swiperIndicatorLineWidth = width;
const offset = left + width / 2;
if (offset > this.$swiperWidth / 2) {
this.tabsScrollLeft = offset - this.$swiperWidth / 2;
}
}
}
}
</script>
<style>
.flex-row {
flex-direction: row;
}
.swiper-list {
flex: 1;
}
.swiper-tabs {
background-color: #ffffff;
}
.swiper-tabs-item {
padding: 12px 25px;
}
.swiper-tabs-item-text {
color: #555;
font-size: 16px;
}
.swiper-tabs-item-text-active {
color: #007AFF;
}
.swiper-tabs-indicator {
position: relative;
height: 2px;
}
.swiper-tabs-underline {
position: absolute;
top: 0;
bottom: 0;
width: 0;
background-color: #007AFF;
}
.swiper-tabs-animation {
transition-duration: 0.2s;
transition-property: left;
}
.swiper-view {
flex: 1;
}
.swiper-item {
flex: 1;
align-items: center;
justify-content: center;
}
.swiper-item-text {
font-size: 72px;
font-weight: bold;
margin: auto;
}
</style>
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册