百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

5、类京东商城小程序_首页商品楼层

bigegpt 2024-09-11 01:08 5 浏览

文章目录

一、效果图：

二、数据获取:

三、UI 界面渲染

四、跳转到商品页

五、配置页面组件navigator跳转页面

六、分支合并与提交（选读*）

一、效果图：

二、数据获取:

  • 数据接口样式【分为标题（包括图片，文字），列表（图片文字）】
{
    "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 }
}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  • 定义data数据
 data() {
      return {
        // 楼层数据数组
        floorList: []
      };
12345
  • method定义调取数据方法
//获取楼层导航数据
      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
      },
123456789
  • onload调取函数

三、UI 界面渲染

在动态循环数据列表渲染页面图片等，可以使用vue 语法 v-bind:,动态绑定，也支持mustache语法 ，但是只限于将文字等一些输出用mustache语法 如输出标题文字，组件内属性还是不支持mustache语法的

且对于所得到图片得样式动态 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;
  }


123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

在设置样式中 自动换行样式为
flex-wrap: wrap;
而不能使用
white-space： normal
这是因为display:flex 会与white-space： normal导致样式冲突，无法达到效果

效果图：

四、跳转到商品页

  • 创建商品页，由于该页面不是用户 在加载小程序主要初始化的对象，将其放在分包中。

4.1、处理接口URL地址

  • 在实际中接口所给的URL地址与自己的命名页面不匹配，且需要对应页面参数，则需要对其进行操作

由于调取数据和渲染页面是同步操作，所以这里处理URl链接则使用forEach循环
他与for区别在于 （for&forEach文章讲解 & 箭头函数）

for是通过下标来索引对应数据，forEach是 JavaScript定义的数组的函数方法 通过 JavaScript底层程序 循环遍历数组的数据元素，原理是指针指向，所以在面对几百万数据集，for可能会卡，forEach还是几毫秒。for 可以通过break 中断， forEach不可以forEach是数组的函数方法，无法进行对变量进行赋值修改等操作

两者最大的区别

  • forEach 是一种函数 可以通过设定参数 来 存储索引下标数据数值，这样在操作上更加的便利
  • for循环的执行 只能是通过循环生成索引下标数值 然后通过索引下标 操作 数组的数据元素
  • 实现代码
 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
   },
1234567891011121314151617

成功修改

五、配置页面组件navigator跳转页面

  • 将对应 商品页的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>
12345678910111213141516171819202122232425262728

接受页面参数，并渲染为窗口标题
在goods_list.vue文件中

export default {
    data() {
      return {
        title:''   //定义参数
      };
    },
    onLoad(options){
      this.title = options  // 接收参数并赋值
      },
    onReady(){
      uni.setNavigationBarTitle({
        title: this.title.query  // 编程时 设置样式
      })
    }
1234567891011121314

效果：

六、分支合并与提交（选读*）

  • 将本地home分支合并到master分支
  • 代码推送到远程仓库
  • 删除分支

操作

  1. git branch 注释： 查看当前分支
  2. git status 注释：查看当前文件状态
  3. git add . 注释：添加所有文件到暂存区
  4. git commit -m “完成了首页功能的开发” 注释：提交到本地仓库
  5. git push -u origin home 注释： -u是配置 upstream，提交本地仓库到远程仓库的分支home保存,确定了默认主机
  6. git checkout master 注释：切换分支到master
  7. git merge home 注释： 合并分支
  8. giit push 注释：由于前面-u 设置了upstearm 所以这次默认提交到master 分支(不需要其他参数）
  9. git branch -d home 注释：删除本地home分支

?谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！?

相关推荐

最全的MySQL总结，助你向阿里“开炮”(面试题+笔记+思维图)

前言作为一名编程人员，对MySQL一定不会陌生，尤其是互联网行业，对MySQL的使用是比较多的。对于求职者来说，MySQL又是面试中一定会问到的重点，很多人拥有大厂梦，却因为MySQL败下阵来。实际上...

Redis数据库从入门到精通（redis数据库设计）

目录一、常见的非关系型数据库NOSQL分类二、了解Redis三、Redis的单节点安装教程四、Redis的常用命令1、Help帮助命令2、SET命令3、过期命令4、查找键命令5、操作键命令6、GET命...

netcore 急速接入第三方登录，不看后悔

新年新气象，趁着新年的喜庆，肝了十来天，终于发了第一版，希望大家喜欢。如果有不喜欢看文字的童鞋，可以直接看下面的地址体验一下：https://oauthlogin.net/前言此次带来得这个小项目是...

精选 30 个 C++ 面试题(含解析)（c++面试题和答案汇总）

大家好，我是柠檬哥，专注编程知识分享。欢迎关注@程序员柠檬橙，编程路上不迷路，私信发送以下关键字获取编程资源：发送1024打包下载10个G编程资源学习资料发送001获取阿里大神LeetCode...

Oracle 12c系列(一)|多租户容器数据库

作者杨禹航出品沃趣技术Oracle12.1发布至今已有多年，但国内Oracle12C的用户并不多，随着12.2在去年的发布，选择安装Oracle12c的客户量明显增加，在接下来的几年中，Or...

flutter系列之:UI layout简介（flutter-ui-nice）

简介对于一个前端框架来说，除了各个组件之外，最重要的就是将这些组件进行连接的布局了。布局的英文名叫做layout，就是用来描述如何将组件进行摆放的一个约束。在flutter中，基本上所有的对象都是wi...

Flutter 分页功能表格控件（flutter 列表）

老孟导读：前2天有读者问到是否有带分页功能的表格控件，今天分页功能的表格控件详细解析来来。PaginatedDataTablePaginatedDataTable是一个带分页功能的DataTable，...

Flutter | 使用BottomNavigationBar快速构建底部导航

平时我们在使用app时经常会看到底部导航栏,而在flutter中它的实现也较为简单.需要用到的组件:BottomNavigationBar导航栏的主体BottomNavigationBarI...

Android中的数据库和本地存储在Flutter中是怎样实现的

如何使用SharedPreferences？在Android中，你可以使用SharedPreferencesAPI来存储少量的键值对。在Flutter中，使用Shared_Pref...

Flet，一个Flutter应用的实用Python库!

▼Flet：用Python轻松构建跨平台应用！在纷繁复杂的Python框架中，Flet宛如一缕清风，为开发者带来极致的跨平台应用开发体验。它用最简单的Python代码，帮你实现移动端、桌面端...

flutter系列之:做一个图像滤镜（flutter photo）

简介很多时候，我们需要一些特效功能，比如给图片做个滤镜什么的，如果是h5页面，那么我们可以很容易的通过css滤镜来实现这个功能。那么如果在flutter中，如果要实现这样的滤镜功能应该怎么处理呢？一起...

flutter软件开发笔记20-flutter web开发

flutterweb开发优势比较多，采用统一的语言，就能开发不同类型的软件，在web开发中，特别是后台式软件中，相比传统的html5开发，更高效，有点像c++编程的方式，把web设计出来了。一...

Flutter实战-请求封装(五)之设置抓包Proxy

用了两年的flutter，有了一些心得，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来...

为什么不在 Flutter 中使用全局变量来管理状态

我相信没有人用全局变量来管理Flutter应用程序的状态。毫无疑问，我们的Flutter应用程序需要状态管理包或Flutter的基本小部件（例如InheritedWidget或St...

Flutter 攻略(Dart基本数据类型，变量 整理 2)

代码运行从main方法开始voidmain(){print("hellodart");}变量与常量var声明变量未初始化变量为nullvarc;//未初始化print(c)...

一周热门
最近发表
标签列表