微信小程序-uniapp使用<scroll-view >组件实现卡片左滑功能在电脑端小程序版不生效问题

文章介绍了如何将原来的基于scroll-view的横向滚动布局替换为swiper组件,以实现更流畅的滑动效果。示例代码展示了在Vue.js项目中使用swiper-item和swiper的配置方法,包括数据绑定、样式设置以及事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<scroll-view class="scroll-view_H" :scroll-x="greaterThan" @scroll="scroll" scroll-left="120">
	<view id="demo1" class="scroll-view-item_H" v-for="(item,index) in vipList" :key="index">
		<view class="flex-between">
			<text style="color:#7d5723 ;font-size: 8px;font-weight: 600;">{
  
  {item.name}}</text><text class="car-type">{
  
  {item.type}}</text>
		</view>
		<view class="flex-between-center">
		<view>¥{
  
  {item.amount}}</view>
		<view style="margin-right: 14rpx;margin-top: 12rpx;">
			<image src="../../../static/vip.png" style="width: 20px;height: 20px;"></image>
		</view>
		</view>
	</view>
</scroll-view>

改用swiper组件就可以啦~附上参考代码

<swiper class="swiper" :display-multiple-items="multipleItems">
	<swiper-item v-for="(item,index) in vipList" :key="inde
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值