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

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

@@ -2,22 +2,30 @@
<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"> <!-- 自动垂直滚动 -->
<view class="article-img"> <swiper class="auto-scroll-swiper" vertical="true" autoplay="true" circular="true"
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" /> interval="3000" duration="500" display-multiple-items="3">
</view> <swiper-item v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<view class="info-wrap"> <view class="swiper-item-content">
<text class="title">{{ item.article_title }}</text> <view :class="['item', value.ornament.type]" :style="itemCss">
<text class="desc" style="color:#888;font-size: 24rpx; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">{{ item.article_abstract }}</text> <view class="article-img">
<view class="read-wrap"> <image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
<block v-if="item.category_name"> </view>
<text class="category-icon"></text> <view class="info-wrap">
<text>{{ item.category_name }}</text> <text class="title">{{ item.article_title }}</text>
</block> <text class="desc" style="color:#888;font-size: 24rpx; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">{{ item.article_abstract }}</text>
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text> <view class="read-wrap">
<block v-if="item.category_name">
<text class="category-icon"></text>
<text>{{ item.category_name }}</text>
</block>
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
</view>
</view>
</view>
</view> </view>
</view> </swiper-item>
</view> </swiper>
</view> </view>
</view> </view>
</x-skeleton> </x-skeleton>
@@ -33,18 +41,18 @@
} }
}, },
data() { data() {
return { return {
list: [], list: [],
loading: true, loading: true,
skeletonConfig: { skeletonConfig: {
gridRows: 1, gridRows: 1,
gridRowsGap: '40rpx', gridRowsGap: '40rpx',
headWidth: '160rpx', headWidth: '160rpx',
headHeight: '160rpx', headHeight: '160rpx',
textRows: 2 textRows: 2
} }
}; };
}, },
created() { created() {
this.getList(); this.getList();
}, },
@@ -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;