快速搭建商品详情页
Sen
• 发表于:2021-07-31 20:49:10 • 更新于:2021-07-31 20:49:10
403

目标:

搭建商城的商品详情页(静态图),并可以从商品列表页点击跳转进来;

开发环境:

白码新自定义页功能(使用vue框架)

前期准备:

在上一篇教程(快速搭建商品详情页)已经建好了商品数据表,以及商品列表数据集,这次商品详情页就需要创建商品的对象数据集,对象数据集是指只包含一条数据的数据集;

商品详情页设计图如下(设计图上传到蓝湖,可直接复制样式代码)

快速搭建商品详情页

根据设计图,可以看出由六部分组成:

①顶部的导航栏

快速搭建商品详情页


②商品基础信息:图片、名称、价格、规格、销量等信息

快速搭建商品详情页


③商家信息

快速搭建商品详情页


④商品评价信息

快速搭建商品详情页


⑤商品详情,详情内容是富文本

快速搭建商品详情页


⑥底部的导航

 快速搭建商品详情页


实现步骤:

在白码工作台的自定义页新增一个页面,命名为“商品详情”;

快速搭建商品详情页

编辑页面,切换到移动端

快速搭建商品详情页

打开图片库,将页面所需图片素材上传到图片库;

快速搭建商品详情页

①顶部导航栏

1. 打开组件库,添加容器类型的块组件,这里的块组件将作为页面顶部的导航栏

快速搭建商品详情页

1.1组件高度和背景颜色等样式都可以从蓝湖设计图这里找到并复制;

快速搭建商品详情页

1.2添加图片组件,放到这个块组件里,作为返回按钮;

快速搭建商品详情页

通过编辑css属性调整样式;

快速搭建商品详情页

1.3再添加一个文本组件,用于显示商品名称,同样的,可以从蓝湖复制css属性过来直接调整样式;

快速搭建商品详情页

此时需要对接数据,先在块组件中对接数据源,选择提前创建好的商品对象数据集;

快速搭建商品详情页

再添加一个属性,对应的是数据源的名称字段,该属性用于文本组件显示商品名称;

快速搭建商品详情页

回到刚才的文本组件,设置其文本属性为父级组件的“商品名称”属性(上一步创建的属性);

快速搭建商品详情页

此时就可以看到页面显示商品名称了

快速搭建商品详情页

1.4 同理,添加图片组件作为分享按钮,这里就不再重复演示了;

快速搭建商品详情页

②中间商品信息

2. 添加一个块组件,用于放置商品信息,命名为“商品信息块”,这个块也需要选择数据源为商品对象,并添加需要显示的属性(商品名称、图片、价格、规格、销量商品详情);

快速搭建商品详情页

2.1再添加一个块组件,放到“商品信息块”中,用于放置商品的图片、名称、价格、规格和销量,命名为“商品基础信息块”,再把商品信息块的属性对接下来;

快速搭建商品详情页

2.2添加1个图片组件、4个文本组件都放到“商品基础信息块”中,分别用于显示商品图片和商品名称、价格、规格、销量,并复制蓝湖的css属性进行调整;

快速搭建商品详情页

2.3添加四个块,分别用于显示“商家配送”、微信认证、商品评价和商品详情,操作同理;

快速搭建商品详情页

③底部导航

3. 底部导航栏的做法其实和顶部导航栏的做法类似,只需要把定位改成“固定底部”;

快速搭建商品详情页

④从商品列表页跳转至商品详情页

4. 上次已经做好了商品列表页,现在需要做跳转的交互,首先需要先在商品详情页添加一个页面属性作为商品id,因为同一个页面要显示不同的商品,这里使用路由类型的页面属性;

快速搭建商品详情页

4.1回到“商品信息块”,设定数据来源的筛选条件,筛选数据源的”_id” 等于页面属性的商品id,这样设定后,每次跳转过来时都会根据不同的商品id筛选到不同的商品并显示对应商品的数据;

快速搭建商品详情页

4.2 回到之前做好的商品列表页,设置商品列表组件下商品块的点击事件

快速搭建商品详情页

快速搭建商品详情页

根据官方的开发文档,代码如下:

快速搭建商品详情页

function runViewAction(key,value,$ctx = ctx){

    let goodsid = $ctx.$$bpView["view_9"].$$bvData["$data"][$ctx.view.index]._id;

    $ctx.cmd({

        type:"redirect",

        value:{

            url:"/app/"+vue.$$util.oidTo64.encode(vue.$$pid)+"/5fd9bc22fd43ef5b37a6b225?query="+JSON.stringify({

                goodsid

            })

        }

    });

}

测试效果:

快速搭建商品详情页


本文是否对您有帮助?
有帮助
没帮助
您是否遇到了以下问题?
内容过期或不准确
缺少场景、事例
链接有误
太简单,步骤待完善
其他
提交反馈
如需获取即时帮助,请联系
小助理
微信扫码添加小助理
让你的想法快速变成软件吧~
联系我们
售前咨询电话
020-88520693
意见箱 · 建议反馈
您的宝贵建议,使白码更完美!
白码小助理
加入白码社区,学习更多开发小技巧!
微信扫码添加白码小助理