uniapp小程序系列-10推荐店铺的滑块设计(上面大图下面滑块)

1.放图

2.创建Shop.vue并在index.vue中三个地方引入,此外还要添加一个Card写"推荐店铺",如图

3.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>
			
		</view>
	</view>
</template>

<script>
</script>

<style scoped>
.shop-big{
	width:100%;
	height:350rpx;
}
</style>

4.接下来做滚动

输入sc可以快捷加入如图

改-y为-x

多整几行

样式设置:

运行效果如图,可以滚动了

4.现在要做的是把1换成每个单品

<script>中引入

把1替换成组件

script里加shopList,记住[]不是{}

ctrl+e可以快速批量修改

再把shopList引入dataList

运行结果:

删掉宽高

运行结果

造成的原因是换行,为了不换行

先在Commodity.vue中增添

再在Shop.vue中

删除Commodity中默认

增加到开头的

调整一下大小

接下来改名字大小

把大图包起来,可以没有白边

最后运行成果展示