10首页推荐店铺模块开发和滑块处理

最新推荐文章于 2024-10-18 17:49:11 发布

Dreamer_gwh

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量233

点赞数

分类专栏： uniapp 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45529137/article/details/126677839

版权

uniapp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文介绍了如何在uni-app中使用Shop.vue组件，通过设置宽度100%和white-space:nowrap，实现在上大图下方创建无缝滚动的滑块，展示了商品列表。每个商品项通过Commodity组件呈现，调整了换行和文字大小以提高视觉效果。

摘要由CSDN通过智能技术生成

1. 效果

在这里插入图片描述

2. 代码

components/index目录下新建Shop.vue组件
pages/index/index.vue引入Shop.vue组件
Shop.vue组件分为：上大图，下滑块的内容布局，滑块采用uni-app提供组件scroll-view。
scroll-view需要给父元素加入width:100%;white-space: nowrap;其内容需要加入样式display: inline-block;
滑块内容调用了单个商品组件，其中改变了是否换行以及文字大小

Shop.vue代码

<template>
	<view class='shop'>
		<view class='shop-item'>
			<view class='shop-big'>
				<image class='shop-big' src="../../static/img/shop.jpg" mode=""></image>
			</view>
			<scroll-view scroll-x="true" class='scroll-content'>
				<view class='scroll-item'>
					<Commodity 
						:dataList='shopList'
						wrap='no-wrap'
						itemW='200rpx'
						bigH='200rpx'
						nameSize='20rpx'
					></Commodity>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import Commodity from '../common/Commodity.vue'
export default {
	data () {
		return {
			shopList:[
				{
					id:1,
					imgUrl:"../../static/img/shop1.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:2,
					imgUrl:"../../static/img/shop2.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:3,
					imgUrl:"../../static/img/shop3.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:4,
					imgUrl:"../../static/img/shop4.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:1,
					imgUrl:"../../static/img/shop1.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:2,
					imgUrl:"../../static/img/shop2.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:3,
					imgUrl:"../../static/img/shop3.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				},
				{
					id:4,
					imgUrl:"../../static/img/shop4.jpg",
					name:"大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
					pprice:"299",
					oprice:"659",
					discount:"5.2"
				}
			]
		}
	},
	components:{
		Commodity
	}
}
</script>

<style scoped>
.shop-big{
	width:100%;
	height: 350rpx;
}
.scroll-content{
	width: 100%;
	white-space: nowrap;
}
.scroll-item{
	display: inline-block;
}
</style>