3.5.4 点击楼层图片跳转到商品列表项
- 在 subpkg 分包中，新建 goods_list 页面
- 楼层数据请求成功之后，通过双层 forEach 循环，处理 URL 地址：
- <script>
export default {
methods: {
// 3. 获取楼层列表数据
async getFloorList() {
const {
data: res
} = await uni.$http.get('/api/public/v1/home/floordata')
if (res.meta.status !== 200) uni.$showMsg()
// 通过双层 forEach 循环，处理 URL 地址
res.message.forEach(floor => {
floor.product_list.forEach(prod => {
prod.url = '/subpkg/goods_list/goods_list?' prod.navigator_url.split('?')[
1]
})
})
this.floorList = res.message
}
}
}
</script> - 将图片外层的 view 组件，改造为 navigator 组件，并动态绑定 url 属性的值：
- <template>
<!-- 楼层区域 -->
<view class="floor-list">
<!-- 楼层的 item 项 -->
<view class="floor-item" v-for="(item, i) in floorList" :key="i">
<!-- 楼层标题 -->
<image :src="item.floor_title.image_src" class="floor-title"></image>
<!-- 楼层图片区域 -->
<view class="floor-img-box">
<!-- 左侧大图片的盒子 -->
<navigator class="left-img-box" :url="item.product_list[0].url">
<image :src="item.product_list[0].image_src"
:style="{width: item.product_list[0].image_width 'rpx'}" mode="widthFix"></image>
</navigator>
<!-- 右侧的 4 个小图片盒子 -->
<view class="right-img-box">
<navigator class="right-img-item" v-for="(item2, i2) in item.product_list" :key="i2" v-if="i2 !== 0"
:url="item2.url">
<image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width 'rpx'}">
</image>
</navigator>
</view>
</view>
</view>
</view>
</template> - 测试效果如下：点击任意一个图片之后：
- 将本地的home分支进行本地的commit提交：
- git add .
git commit -m "完成了home首页的开发" - 将本地的home分支推送到远程仓库进行保存：
- git push -u origin home
- 将本地的 home 分支合并到本地的 master 分支：
- git checkout master
git merge home - 删除本地的 home 分支
- git branch -d home
