Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(diy-article): 支持diy-article 组件内的内容自动垂直滚动

Browse Source
This commit is contained in:
ZF Sun
2025-12-23 11:22:29 +08:00
parent 1d7629168c
commit 96049bbcae
1 changed files with 45 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/diy-components/diy-article.vue
View File

@@ -2,7 +2,12 @@
<x-skeleton data-component-name="diy-article" type="list" :loading="loading" :configs="skeletonConfig"> <x-skeleton data-component-name="diy-article" type="list" :loading="loading" :configs="skeletonConfig">
<view class="article-wrap" :style="warpCss"> <view class="article-wrap" :style="warpCss">
<view :class="['list-wrap', value.style]" :style="warpCss"> <view :class="['list-wrap', value.style]" :style="warpCss">
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :style="itemCss"> <!-- 自动垂直滚动 -->
<swiper class="auto-scroll-swiper" vertical="true" autoplay="true" circular="true"
interval="3000" duration="500" display-multiple-items="3">
<swiper-item v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<view class="swiper-item-content">
<view :class="['item', value.ornament.type]" :style="itemCss">
<view class="article-img"> <view class="article-img">
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" /> <image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
</view> </view>
@@ -19,6 +24,9 @@
</view> </view>
</view> </view>
</view> </view>
</swiper-item>
</swiper>
</view>
</view> </view>
</x-skeleton> </x-skeleton>
</template> </template>
@@ -123,10 +131,20 @@
.article-wrap { .article-wrap {
.list-wrap { .list-wrap {
&.style-1 { &.style-1 {
.auto-scroll-swiper {
height: 480rpx;
width: 100%;
}
.swiper-item-content {
width: 100%;
box-sizing: border-box;
}
.item { .item {
display: flex; display: flex;
padding: 20rpx; padding: 20rpx;
margin-top: 24rpx; margin-top: 24rpx;
height: 120rpx;
box-sizing: border-box;
&:first-of-type { &:first-of-type {
margin-top: 0; margin-top: 0;