👋👋欢迎来到👋👋 🎩魔术之家!!🎩 该文章收录专栏 ✨-- 2022微信小程序京东商城实战 --✨ 专栏内容 ✨-- 京东商城uni-app项目搭建 --✨ ✨-- 京东商城uni-app 配置tabBar & 窗口样式 --✨ ✨-- 京东商城uni-app开发之分包配置 --✨ ✨-- 京东商城uni-app开发之轮播图 --✨ ✨-- 京东商城uni-app之分类导航区域 --✨ ✨-- 京东商城uni-app 首页楼层商品 --✨ ✨-- 京东商城uni-app 商品分类页面(上) --✨ ✨-- 京东商城uni-app 商品分类页面(下) --✨ ✨-- 京东商城uni-app之自定义搜索组件(上) --✨ ✨-- 京东商城uni-app之自定义搜索组件(中) --✨
{
"message": [
{
"floor_title": {
"name": "时尚女装",
"image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_title.png"
},
"product_list": [
{
"name": "优质服饰",
"image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_1@2x.png",
"image_width": "232",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query=服饰"
},
{
"name": "春季热门",
"image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_2@2x.png",
"image_width": "233",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query=热"
},
{
"name": "爆款清仓",
"image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_3@2x.png",
"image_width": "233",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query=爆款"
},
{
"name": "倒春寒",
"image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_4@2x.png",
"image_width": "233",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query=春季"
},
{
"name": "怦然心动",
"image_src": "https://www.zhengzhicheng.cn/pyg/pic_floor01_5@2x.png",
"image_width": "233",
"open_type": "navigate",
"navigator_url": "/pages/goods_list?query=心动"
}
]
},
"meta": { "msg": "获取成功", "status": 200 }
}
data() {
return {
// 楼层数据数组
floorList: []
};
//获取楼层导航数据
async getfloorList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/floordata')
//如果调取失败 显示报错提示
if (res.meta.status != 200) return uni.$showMsg()
this.floorList = res.message
},
且对于所得到图片得样式动态 style
中 需要 后面加上 {}
表示动态渲染
<!-- 楼层区域 -->
<!-- 楼层容器 -->
<view class="">
<!-- 楼层 item -->
<view class="floor_list" v-for="(item,index) in floorList" v-bind:key="index">
<!-- 楼层标题 -->
<view class="floor_title">
<image v-bind:src="item.floor_title.image_src" class="floor_title_image" mode="widthFix"></image>
<!-- <text>{{item.floor_title.name}}</text> -->
</view>
<!-- 楼层列表 -->
<view class="floor_product">
<!-- 左侧大图片 -->
<view class="left-img-box">
<!-- 拼接 不全单位px -->
<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}">
</image>
</view>
<!-- 右侧图片列表 -->
<view class="right-img-box">
<!-- 判断索引为0得情况 -->
<view class="right-img-item" v-for="(product,i) in item.product_list" v-bind:key="i" v-if="i != 0">
<image :src="product.image_src" :style="{width: product.image_width + 'rpx'}" mode="widthFix">
</view>
</image>
</view>
</view>
</view>
</view>
//注释:样式
.floor_title {
display: flex;
flex-direction: column;
}
.floor_title image {
height: 60rpx;
width: 100%;
}
.floor_product {
display: flex;
padding: 10rpx;
}
.right-img-box {
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
在设置样式中 自动换行样式为 flex-wrap: wrap; 而不能使用 white-space: normal 这是因为display:flex 会与white-space: normal导致样式冲突,无法达到效果
效果图:
由于调取数据和渲染页面是同步操作,所以这里处理URl链接则使用forEach
循环
他与for区别在于 (for&forEach文章讲解 & 箭头函数)
两者最大的区别
methods: {
//获取楼层导航数据
async getfloorList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/floordata')
//如果调取失败 显示报错提示
if (res.meta.status != 200) return uni.$showMsg()
// 双重forEach循环修改URL
res.message.forEach(floor => {
floor.product_list.forEach(prd => {
prd.navigator_url = '/subpackages/goods_list/goods_list?' + prd.navigator_url.split('?')[1] //切割为列表 取后面的页面参数
})
})
this.floorList = res.message
},
成功修改
view
改为 navigator
组件 <!-- 楼层区域 -->
<!-- 楼层容器 -->
<view class="">
<!-- 楼层 item -->
<view class="floor_list" v-for="(item,index) in floorList" v-bind:key="index">
<!-- 楼层标题 -->
<view class="floor_title">
<image v-bind:src="item.floor_title.image_src" class="floor_title_image" mode="widthFix"></image>
<!-- <text>{{item.floor_title.name}}</text> -->
</view>
<!-- 楼层项目列表 -->
<view class="floor_product">
<!-- 左侧大图片 -->
<navigator class="left-img-box" :url="item.product_list[0].navigator_url">
<!-- 拼接 不全单位px -->
<image :src="item.product_list[0].image_src" :style="{width: item.product_list[0].image_width + 'rpx'}">
</navigator>
<!-- 右侧图片列表 -->
<view class="right-img-box">
<!-- 判断索引为0得情况 -->
<navigator class="right-img-item" v-for="(product,i) in item.product_list" v-bind:key="i" v-if="i != 0" :url="product.navigator_url">
<image :src="product.image_src" :style="{width: product.image_width + 'rpx'}" mode="widthFix">
</navigator>
</image>
</view>
</view>
</view>
</view>
接受页面参数,并渲染为窗口标题
在goods_list.vue文件中
export default {
data() {
return {
title:'' //定义参数
};
},
onLoad(options){
this.title = options // 接收参数并赋值
},
onReady(){
uni.setNavigationBarTitle({
title: this.title.query // 编程时 设置样式
})
}
效果:
操作