uniapp里面computed的妙用

前言:

目前小程序市场里面, 有两大技术框架比较流行, 一个是 Taro, 一个 uni-app, 在这边写项目的时候用 uni-app 比较多, 今天就主要讲讲在日常开发小程序使用 uni-app 的一些经验, 其实写 uni-app 就是在写 vue, 因为 uni-app 就结合了 vue 的语法做了一些处理和封装, 生命周期, 组件钩子都是跟正常挨罚 vue 差不多的

需求:

封装一个菜单组件, 通过首页加载, 并使用首页接口返回的某个数据, 通过该数据中的字段调用另一个接口, 达到渲染菜单组件渲染的目的

首页代码:

需求涉及到父子组件的传值, 典型的父组件传值给子组件

<!-- 自定义菜单组件  s -->
<view v-if="item.assemblyType == 6&&item.xcxStatus == 0">
    <sd-foot-category :datas="item.items"></sd-foot-category>
</view>
<!-- 自定义菜单组件  e -->

首页注册组件

import  sdFootCategory from "./sdCategoryFootGoodsList/sdFootCategory.vue";  // 底部菜单列表组件
components: {sdFootCategory},

菜单组件代码:

通过拿到父组件的传递的 props, 使用 props 里面的某个值完成组件渲染, 并达到首次加载组件渲染全部数据, 待组件内自由切换按钮后再加载其他栏目数据, 需求实现的关键点: 使用 computed.

<template>
    <view class="main" >
        <view class="main-box">
            <view class="footcategory">
                <scroll-view class="first-scroll" scroll-x="true">
                    <view v-for="(o,x) in datas" :key="x" @tap="gotoGetCategoryList(o.id,o.menuLabel)" class="first-box1">
                        <view class="box">
                            <text :class="o.id==assemblyContentId?'content-name1':'content-name'">{{o.contentName}}</text>
                            <text :class="o.id==assemblyContentId?'content-title1':'content-title'">{{o.contentTitle}}</text>
                        </view>

                    </view>
                </scroll-view>
            </view>
            <!-- 商品列表  s -->
            <view class="goodslist">
                <view class="goodslist-box" v-for="(goods,y) in goodsInfoList" :key="y" @tap="toDetail(goods)">
                    <view class="img">
                        <image :src="goods.sdGoodsVo.image" mode="aspectFill"></image>
                    </view>
                    <view class="info">
                        <view class="name">{{goods.sdGoodsVo.name}}</view>
                        <view class="sellingPoint">{{goods.sdGoodsVo.sellingPoint?goods.sdGoodsVo.sellingPoint:''}}</view>
                        <view class="flex-direction-row align-items-end">
                            <view class="price"><text>￥</text>{{goods.sdGoodsVo.salePirce}}</view>
                            <view class="memberPirce"><text>￥</text>{{goods.sdGoodsVo.memberPirce}}</view>
                            <image class="plusImg" src="../../../static/image/goodsdetail/plus.png"></image>
                        </view>
                    </view>
                </view>

                <view v-if="isShow" class="nodata-box">
                    <image src="../../static/image/nodata.png" class="nodata"></image>
                    <view class="nodata-text"> 暂无商品 </view>
                </view>
            </view>
            <!-- 商品列表  e -->

        </view>

    </view>

</template>

<script>
    export default {
        name: "sdFootCategory",
        //props 校验
        props: {
            datas: {type: Array}
        },
        data() {
            return {goodsinfo: [],
                smShopInfo: {},
                assemblyContentId: this.datas[0].id,
                goodsInfoList: [],
                isShow: false
            }
        },
        // 使用 computed 就能达到首次渲染全部数据的目的, 而且当组件内通过按钮加载其他栏目数据时候,computed 依赖的 goodsInfoList 也会发生改变
        computed: {
            // 获取列表
            getCategoryList(e) {
                let params = {shopId: uni.getStorageSync('smShopInfo').id,
                    assemblyContentId: this.datas[0].id
                }
                this.$http.get(this.$api.customizeList, {data: params}).then(res => {if (res.data.code == 200) {if (!!res.data.data) {
                            this.goodsInfoList = res.data.data.list
                            // console.log(res.data.data.list);
                            console.log(this.isTop);
                            this.isShow = false
                        } else {this.goodsInfoList = [];
                            this.isShow = true
                        }
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon: 'none'
                        });
                    }
                })
            },

        },
        onLoad(option) {console.log(datas)    
        },
        onShow() {console.log(this.datas)
            this.getCategoryList()},
        methods: {
            // 点击后   显示不同的商品
            gotoGetCategoryList(id, menuLabel) {
                let params = {shopId: uni.getStorageSync('smShopInfo').id,
                    assemblyContentId: id
                }
                this.$http.get(this.$api.customizeList, {data: params}).then(res => {if (res.data.code == 200) {
                        uni.showToast({
                            title: '加载中',
                            duration: 1000,
                            icon: 'none'
                        });
                        if (!!res.data.data) {
                  this.goodsInfoList=res.data.data.list
                            this.isShow = false
                        } else {this.goodsInfoList = [];
                            this.isShow = true
                        }
                        this.assemblyContentId = id
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            duration: 2000,
                            icon: 'none'
                        });
                    }
                })
            }
</script>