使用uni-app编写一个可以点击收藏或者加购物车的界面,并在跳转的下一个页面显示内容
时间: 2024-03-26 08:39:53 浏览: 57
本人的一个APP程序,实现页面跳转
好的,以下是一个简单的使用uni-app编写的可以点击收藏或加购物车的界面,并在跳转的下一个页面显示内容的示例代码:
1. 在pages文件夹下新建两个页面,命名为index和cart
2. 在index.vue页面中添加以下代码:
```html
<template>
<view class="content">
<view class="item" @click="addCart">
<text>商品名称</text>
<text>¥100</text>
<view class="btn-add-cart">加入购物车</view>
</view>
<view class="item" @click="collect">
<text>商品名称</text>
<text>¥200</text>
<view class="btn-collect">{{collected ? '已收藏' : '收藏'}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
collected: false
}
},
methods: {
addCart() {
uni.navigateTo({
url: '/pages/cart'
})
},
collect() {
this.collected = !this.collected
}
}
}
</script>
<style>
.content {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.item {
width: 48%;
margin-right: 2%;
margin-bottom: 10px;
background-color: #fff;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px #ccc;
}
.item text:first-child {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.item text:last-child {
font-size: 14px;
color: #999;
margin-bottom: 10px;
}
.btn-add-cart, .btn-collect {
display: inline-block;
padding: 6px 10px;
background-color: #ff5722;
color: #fff;
border-radius: 3px;
font-size: 14px;
}
.btn-add-cart {
float: right;
}
</style>
```
3. 在cart.vue页面中添加以下代码:
```html
<template>
<view class="content">
<view v-for="(item, index) in cartList" :key="index" class="item">
<text>{{item.name}}</text>
<text>¥{{item.price}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
cartList: []
}
},
onShow() {
this.cartList = uni.getStorageSync('cartList') || []
}
}
</script>
<style>
.content {
padding: 10px;
}
.item {
background-color: #fff;
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
box-shadow: 0 0 10px #ccc;
}
.item text:first-child {
font-size: 18px;
color: #333;
margin-bottom: 10px;
}
.item text:last-child {
font-size: 14px;
color: #999;
margin-bottom: 10px;
}
</style>
```
在以上代码中,我们在index.vue页面中添加了两个商品,一个可以点击加入购物车,一个可以点击收藏。当用户点击加入购物车时,会跳转到cart.vue页面,并在页面中显示购物车列表。当用户点击收藏时,我们使用了一个collected变量来记录用户是否已经收藏了该商品,点击后进行状态反转。
注意:以上代码只是一个简单的示例,实际开发中需要根据自己的需求进行修改。
阅读全文