用uni-app设计一个产品列表页面
## 页面效果图：
## 代码实现：
```html
<template>
<view class="content">
<!-- 商品列表 -->
<view class="list" v-for="(item,index) in list" :key="index">
<!-- 商品图片 -->
<image class="img" :src="item.imgUrl"></image>
<!-- 商品信息 -->
<view class="info">
<!-- 标题 -->
<text class="title">{{item.title}}</text>
<!-- 描述 -->
<text class="desc">{{item.desc}}</text>
<!-- 特价标记 -->
<text v-if='item.isSpecial' class='special'>特价</text>
<!-- 折扣价格 -->
<view class='price'>￥{{item.price * item.discount}}</view>
</view>
</view>
</view>
//引入css样式文件。在App中使用@import导入即可。 @import "./productListPage.css"; ├── productListPage │ ├── productListPage .vue │ └── productListPage .css //CSS样式文件 /*productListPage*/ .content{ padding: 0 15px; } .list{ margin: 10px 0; padding: 10px 0; border-bottom: 1px solid #ccc; } .img{ width: 100%; height: 150px; } .info{ display: flex; justify-content: space-between; align-items: center; } .title,.desc,.price{ font-size: 14px; color:#666;} .special { color:#FF0000;} 复制代码<script > export default { data(){ return { list:[ { title:"iPhone XS", desc:"Apple iPhone XS Max (A2101) 256GB 黑色 移动联通电信4G手机", imgUrl:"../../static/iphoneXSMaxBlack256GB_1_thumb_G_1560343650884.jpg", isSpecial : true, price : 8999, discount : 0.8 }, { title:"iPhone 11 Pro Max", desc:"Apple iPhone 11 Pro Max (A2220) 512GB 钛金色 移动联通电信4G手机", imgUrl:"../../static/iphone11promax512gbtitangold_1_thumb_G_1575457987127..jpg", isSpecial : false, price : 9999, discount : 1 }, ] } }, methods:{} } </script><style scoped></style
AI智能问答网免责声明：
以上内容除特别注明外均来源于网友提问、ChatGPT回答，权益归原著者所有，本站仅作效果演示和欣赏之用；
若以上展示有冒犯或侵害到您，敬请联系我们进行删除处理，谢谢！