微信小程序 动态渲染

一、 xml文件

根据template is 属性判断是哪一个组件
根据elementType来映射不同组件

<import src="./components/goods/index.wxml"/>
<import src="./components/icon/index.wxml"/>
<import src="./components/img/index.wxml"/>
<import src="./components/label/index.wxml"/>
<import src="./components/placeholder/index.wxml"/>
<import src="./components/tab/index.wxml"/>
<import src="./components/title/index.wxml"/>
<import src="./components/welfare/index.wxml"/><view class="container" style="background: {{bgColor}}"><header title="{{title}}" fixed/><block wx:for="{{components}}" wx:for-index="idx" wx:for-item="item" wx:key="componentId"><template is="{{ componentMap[item.elementType] }}" data="{{...item, labelGoods, subLabels, customBar, bgColor}}"/></block></view>

二、 js文件

import { getHomeData } from '../../../service/tabbar/home.js'const app = getApp()Page({data: {customBar: app.globalData.customBar,title: '',bgColor: '',components: [],componentMap: {1: 'tab',2: 'icon',3: 'img',4: 'welfare',5: 'label',6: 'title',7: 'placeholder',8: 'goods',},activeTab: 0,// tab 组件专属activeLabel: 0,// label组件专属activeSubLabel: 0,// label组件专属subLabels: [],// 子标签labelGoods: [1, 2, 1, 2, 3, 4],// label 的商品列表},// 获取首页数据async fetchHomeData(){let res = await getHomeData()if(!res)return false;let { title, bgColor, components } = res;console.log('components', components)components.forEach(v=>{if(v.elementType === 5){if(v.list.length){this.setData({subLabels: v.list[0]['subTags'] || []})}// 调接口获取商品列表}})this.setData({title,bgColor,components,})},onTabClick(e) {const index = e.detail.indexif(index !== this.data.activeTab){const tabs = e.target.dataset.tabs || [];this.setData({ activeTab: index })}},onIconClick(e){let info = e.currentTarget.dataset.info || {};console.log(info)let { linkType, linkUrl } = infoif(linkType === 4){wx.navigateTo({url: `/pages/webview/index?url=${linkUrl}`})}},onImgClick(e){let info = e.currentTarget.dataset.info || {};console.log(info)let { linkType, linkUrl } = infoif(linkType === 4){wx.navigateTo({url: `/pages/webview/index?url=${linkUrl}`})}},onLabelClick(e){console.log('e', e)},onSubLabelClick(e){console.log('e', e)},jump(e){wx.switchTab({url: '/pages/tabBar/category/index'})},onShow(){this.fetchHomeData();}
})

三、 json文件

{"navigationStyle": "custom","usingComponents": {"header": "/components/Header/index","goods-item": "/components/GoodsItem/index","mp-tabs": "@miniprogram-component-plus/tabs"},"onReachBottomDistance": 50
}

四、 css文件

.container{position: relative;min-height: 100vh;
}
.tabs-content{height: 0rpx;
}/* tab组件 */
.tab{position: relative;height: 98rpx;background: #000;
}.tab_bg--img{position: absolute;top: 0rpx;left: 0rpx;width: 750rpx;height: 284rpx;
}
.tab-class{height: 80rpx;margin: 0 30rpx;padding-top: 20rpx;font-size: 32rpx;color: #fff;
}
.tab-active{position: relative;
}
.tab-active::before{position: absolute;content: '';bottom: 0;left: 50%;transform: translateX(-50%);width: 46rpx;height: 4rpx;background: #ffffff;border-radius: 2rpx;
}
.weui-tabs-bar__wrp{background: transparent !important;
}.tab-container{display: flex;justify-content: space-between;width: 100%;height: 98rpx;overflow: hidden;
}
.tab-scroll{width: 670rpx;
}
.tab-more{height: 98rpx;width: 79rpx;display: flex;align-items: center;justify-content: center;z-index: 2;box-shadow: -7rpx 0 20rpx 3rpx rgba(217,52,90,0.5); 
}
.tab-more image{width: 32rpx;height: 32rpx;
}/* placeholder组件 */
.placeholder{position: relative;width: 100%;height: 20rpx;
}/* icon组件 */
.icon{position: relative;display: flex;flex-wrap: wrap;width: 714rpx;margin: 0 auto;background-color: #fff;border-radius: 30rpx;padding-top: 20rpx;
}
.icon-item{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 136rpx;margin-bottom: 30rpx;margin-right: 9rpx;
}
.icon-item:nth-child(5n+5){margin-right: 0rpx;
}.icon-img{width: 96rpx;height: 80rpx;
}.icon-text{font-size: 24rpx;font-weight: 400;color: #333333;
}/* img组件 */
.banner{position: relative;width: 714rpx;height: 301rpx;margin: 0 auto;border-radius: 30rpx;transform: translateY(0);overflow: hidden;
}.banner-img{width: 714rpx;height: 301rpx;
}/* title组件 */
.title{width: 750rpx;height: 76rpx;margin: 0 auto;overflow: hidden;display: flex;justify-content: space-between;
}
.title-bg{width: 750rpx;height: 76rpx;
}
.title-left{}
.title-right{}/* 特价福利组件 */
.welfare{width: 714rpx;height: 225rpx;padding: 0 20rpx;background-color: #ffffff;margin: 0 auto;border-bottom-left-radius: 30rpx;border-bottom-right-radius: 30rpx;overflow: hidden;
}
.welfare-scroll{width: 100%;height: 100%;white-space: nowrap;
}.welfare-goods-item{display: inline-block;width: 180rpx;height: 224rpx;margin-right: 12rpx;
}
.welfare-goods-img{position: relative;text-align: center;
}
.welfare-goods-img image{width: 148rpx;height: 148rpx;
}
.welfare-goods-tag{position: absolute;bottom: 0rpx;left: 50%;display: flex;justify-content: center;align-items: center;height: 30rpx;max-width: 180rpx;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;padding: 0 7rpx;background: #eca482;border-radius: 5rpx;transform: translateX(-50%);font-size: 22rpx;font-weight: 400;color: #ffffff;
}
.welfare-goods-price{text-align: center;
}
.welfare-goods-price text:first-child{font-size: 24rpx;color: #e85148;
}
.welfare-goods-price text:last-child{font-size: 28rpx;font-weight: 500;color: #e85148;
}
/* 商品组件 */
.goods{}/* 标签组件 */
.label{position: sticky;width: 100%;height: 129rpx;z-index: 10;
}.label-goods__list{width: 100%;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;overflow: hidden;background-color: #ffffff;min-height: calc(100vh - 260rpx);padding-top: 24rpx;
}
.label-class{padding: 0 96rpx;height: 60rpx;border-bottom-width: 6rpx !important;padding-top: 10rpx;
}
.label-class text{font-size: 28rpx;color: #333;
}.label-tabs .weui-tabs-bar__item{position: relative;
}
.label-tabs .weui-tabs-bar__item:not(:last-child)::after{position: absolute;content: '';top: 24rpx;right: 0;width: 1rpx;height: 26rpx;background-color: #d5d5d5;
}
.label-active{position: relative;
}
.label-active::before{position: absolute;content: '';bottom: 1rpx;left: 50%;width: 63rpx;height: 8rpx;background: linear-gradient(102deg,#fb4b3d, #fd8044);box-shadow: 0rpx 1rpx 7rpx 4rpx rgba(246,66,52,0.33); border-radius: 4rpx;transform: translateX(-50%);z-index: -1;
}.label-sub__tabs{}.sub-label-class{display: flex !important;align-items: center;justify-content: center;height: 40rpx;background-color: #fff;margin-left: 18rpx;margin: 14rpx 0 14rpx 18rpx;border: 2rpx solid #fff !important;border-radius: 10rpx;padding: 0 23rpx;font-size: 24rpx;font-weight: 400;box-sizing: border-box;
}
.label-sub__tabs .weui-tabs-bar__item:last-child .sub-label-class{margin-right: 18rpx;
}
.sub-label-active{background-color: #fcefee;border: 2rpx solid #e85148 !important;color: #E85148;
}

五、 文件目录

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！