前言:
目前小程序市场里面,有两大技术框架比较流行,一个是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>