uni-app把一个页面当做是子组件来用。这个页面既可以单独的显示也可以作为组件用。

本文介绍了如何在uni-app中将一个页面作为子组件使用,同时处理页面分享和参数传递的问题。当页面作为子组件时,无法通过onLoad获取参数,而是通过mounted和组件间通信实现。分享页面需要在不跳转的情况下改变参数,并在子组件中检查参数以确定是否为分享页面。
摘要由CSDN通过智能技术生成

遇到的问题:具体就是分享页面,使用了太多的页面,一些是以前得一些页面。如果全部重新浪费时间而且小程序安装包的内存要求一般是2M。重新写肯定浪费内存。所以尽可能得能使用以前得就用以前得页面。

 

作为一个页面的时候,应该是在onLoad里面获取页面的传值。

但是作为一个组件,onLoad里面是获取不到值的,因为页面不是跳转,这样的方式:

uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

onLoad(options) {
           console.log(options)

}

上面的方式是不行的啊。他还能当作页面使用的话肯定也不能使用子组件props这样的方式。

 

我们可以在分享页使用切换tab时,页面跳转但是是跳转到当前页面就是传递不同的参数、

share.vue

<template>

     <view>
                <scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-X"  >
                    <view id="demo1" class="scroll-view-item uni-bg-red" @tap="to

好的,我可以帮你解答这个问题。 首先,你需要使用uni-app来编写这个界面。uni-app一个基于Vue.js的跨平台开发框架,可以让你使用Vue.js来开发小程序、H5应用、App等多种平台的应用程序。 接下来,你需要创建一个页面,这个页面包含一个可以点击加购物车的按钮。你可以在页面使用uni-app提供的组件来实现这个按钮,比如按钮组件`<van-button>`,如下所示: ```html <template> <div> <van-button type="primary" @click="addToCart">加入购物车</van-button> </div> </template> <script> export default { methods: { addToCart() { // 在这里处理添加到购物车的逻辑 // 比如将商品信息保存到本地存储中 uni.setStorageSync('cart', { name: '商品1', price: 10 }) // 跳转到下一个页面 uni.navigateTo({ url: '/pages/cart/cart' }) } } } </script> ``` 在上面的代码中,我们使用了`<van-button>`组件来创建一个可以点击加购物车的按钮。当用户点击按钮时,会触发`addToCart`方法,在这个方法中我们可以处理添加到购物车的逻辑,比如将商品信息保存到本地存储中。然后我们使用`uni.navigateTo`方法来跳转到下一个页面,这个页面用来显示购物车中的内容。 接下来,我们需要创建下一个页面`/pages/cart/cart.vue`,这个页面用来显示购物车中的内容。你可以使用`uni.getStorageSync`方法来获取购物车中的商品信息,并在页面显示出来,如下所示: ```html <template> <div> <div v-for="(item, index) in cartItems" :key="index"> <span>{{ item.name }}</span> <span>{{ item.price }}</span> </div> </div> </template> <script> export default { computed: { cartItems() { // 从本地存储中获取购物车中的商品信息 return uni.getStorageSync('cart') || [] } } } </script> ``` 在上面的代码中,我们使用了`v-for`指令来遍历购物车中的商品信息,并使用`uni.getStorageSync`方法来获取购物车中的商品信息。然后我们将商品信息显示页面中。 这样,我们就完成了一个可以点击加购物车的界面,并在跳转的下一个页面显示购物车中的内容的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值