专栏首页算法与编程之美微信小程序|订单栏和商品导航栏

微信小程序|订单栏和商品导航栏

问题描述

随着小程序的快速发展,越来越多的app都出台了小程序。不再需要去下载淘宝或者京东等一些购物app来满足购物需求,而是通过微信小程序来进行购物,这样不仅方便而且不浪费手机储存空间。那么,在小程序中如何来实现商品的订单栏和导航栏的呢?

解决方案

订单栏和导航栏是由很多的组件组合在一起的,按钮,栏,图标,文字描述等。需要在json中引用vant组件,然后在wxml中调用,最后再对内容进行属性设置。

一、订单栏

1.在json中调用van-tab组件。

代码示例:

"usingComponents": { "van-submit-bar": " /dist/submit-bar/index" }}

2.在wxml中实现。

Price设置订单的价格,

button-text="提交订单"设置按钮,

submit设置按钮点击事件回调,

tip设置提示文案。

代码示例:

<van-submit-bar price="{{ 3050 }}" button-text="提交订单" bind:submit="onClickButton" tip="{{ true }}"> <van-tag type="primary">全选</van-tag> <view slot="tip"> 您的收货地址不支持同城送, <text>修改地址</text> </view></van-submit-bar>

图 1 效果图

二、商品导航栏

1.在json中调用van-tab组件。

代码示例:

"usingComponents": { "van-goods-action": "/dist/goods-action/index", "van-goods-action-icon": "/dist/goods-action-icon/index", "van-goods-action-button":"/dist/goods-action-button/index"}

2.在wxml中实现。

icon:设置图标类型,

text:设置文字,

info :设置提示数字,

type:设置按钮形式。

代码示例:

<van-goods-action > <van-goods-action-icon icon="chat-o" text="客服" dot /> <van-goods-action-icon icon="cart-o" text="购物车" info="5" /> <van-goods-action-icon icon="shop-o" text="店铺" /> <van-goods-action-button text="加入购物车" type="warning" /> <van-goods-action-button text="立即购买" /></van-goods-action>

图 2 效果图

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:江汪霖

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|页面动态更新数据

    每一个小程序都是由很多的数据构成的,这些信息数据构成页面内容再通过视图展现给大家。大家平时所使用的微信小程序都是实时更新的将最新的数据内容分享给大家。如果没有进...

    算法与编程之美
  • 微信小程序|配置商品导航

    我们日常当中越来越多的小程序需要用到选择购买商品,并将商品加入购物车的导航过程,那么如何实现这个过程呢?

    算法与编程之美
  • 微信小程序|页面的生命周期函数onLoad

    相信小程序的初学者对js页面是很模糊的总感觉看不懂,其实js页面总的来说就是一个Page()函数。用Page()函数来注册一个页面,接受一个object参数,实...

    算法与编程之美
  • CSS——可视化格式模型

    <div> some inline text <p>more text</p> ...

    keyWords
  • 使用wxpy这个基于python实现的微信工具库的一些常见问题

    Collecting wxpy

    Jerry Wang
  • 在mono 3.0 下运行ASP.NET 4网站的主意事项

    由于mono3.0开始,.NET4是以.NET4.5为默认环境,所以,当服务器升级到mono3后,原来的ASP.NET4网站会出现问题,比如“System.Ar...

    张善友
  • ORA-02409:超时:分布式事务处理等待锁定ORA-02063

    ORA-02409:超时:分布式事务处理等待锁定ORA-02063 一、错误现象与环境     前端应用程序运行时出现下面的错误提示: 事件添加失败:O...

    Leshami
  • 磨砺,文火,慢熬,起锅前再加一点“匠料”

    ? ? 引言 ? ? 数据中心运营是一项复杂的系统性工作,涉及各类专业多达十余种。漫长的运营周期,赋予了一线运营人员专业专注、精益求精的工匠特质。每一次巡检、...

    腾讯数据中心
  • 介绍一个好用的Chrome扩展,能高效管理cookie

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    Jerry Wang
  • python启动应用程序和终止应用程序

    每天上班,工作需要,电脑上需要每天开机启动一些软件,下班时候,需要关掉一些软件。一个一个打开和关闭貌似是很繁琐的,于是乎,这个脚本产生了。

    py3study

扫码关注云+社区

领取腾讯云代金券