用uview写一个小程序商品详情页
时间: 2024-04-09 09:27:29 浏览: 19
当然可以!下面是一个使用uView组件库编写的简单商品详情页的示例:
```vue
<template>
<view class="container">
<!-- 商品图片 -->
<image class="goods-image" :src="goods.image" mode="aspectFill"></image>
<!-- 商品标题 -->
<view class="goods-title">{{ goods.title }}</view>
<!-- 商品价格 -->
<view class="goods-price">¥{{ goods.price }}</view>
<!-- 商品描述 -->
<view class="goods-description">{{ goods.description }}</view>
<!-- 商品评价 -->
<view class="goods-evaluation">
<view class="evaluation-title">商品评价</view>
<view class="evaluation-content">{{ goods.evaluation }}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
goods: {
image: 'https://example.com/goods-image.jpg',
title: '商品标题',
price: 99.99,
description: '商品描述',
evaluation: '商品评价内容',
},
};
},
};
</script>
<style>
.container {
padding: 20rpx;
}
.goods-image {
width: 100%;
height: 300rpx;
margin-bottom: 20rpx;
}
.goods-title {
font-size: 28rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.goods-price {
font-size: 24rpx;
color: #f00;
margin-bottom: 10rpx;
}
.goods-description {
font-size: 24rpx;
color: #666;
margin-bottom: 20rpx;
}
.goods-evaluation {
border-top: 1px solid #eee;
padding-top: 20rpx;
}
.evaluation-title {
font-size: 26rpx;
font-weight: bold;
margin-bottom: 10rpx;
}
.evaluation-content {
font-size: 24rpx;
color: #666;
}
</style>
```
这个示例中,我们使用了uView组件库来构建商品详情页。其中,商品数据通过`goods`对象进行管理,你可以根据实际情况进行修改。
希望这个示例对你有所帮助!如果有任何疑问,请随时提问。