uni-app里面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>