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>