uni 小程序两列布局组件

想个名字想老半天

已于 2022-10-14 09:26:17 修改

阅读量1.3k

点赞数 1

分类专栏： vue uniapp 文章标签：小程序 javascript vue.js

于 2022-10-13 10:31:14 首次发布

本文链接：https://blog.csdn.net/MistShown/article/details/127295866

版权

实现商品两列布局

效果图如下：
在这里插入图片描述

具体的步骤如下：

在components文件夹下新建一个文件 shopList.vue 文件

在这里插入图片描述
代码如下：

<template>
	<view>
		<view class="shopList">
			<view class="itemshop" v-for="(item,index) in shopList"  @click="toDetail(item)" :key='index'>
				<view class="itemIcon">
					<image :src="item[proImgKey]" style="width: 100%;height: 100%;border-radius: 8rpx 8rpx 0rpx 0rpx;" mode=""></image>
				</view>
				<view class="itemBottem">
					<view class="title">
						{
   {
   item[nameKey]}}
					</view>
					<view v-if="featuredType!=4" class="money">
						<view class="money_left">
							<text class="text">￥</text>
							<text v-if="item[priceKey]" class="miney">{
   {
   item[priceKey].toFixed(