前言

vant-weapp的van-goods-action商品导航api

GoodsAction Props

参数	说明	类型	默认值
safe-area-inset-bottom	是否为 iPhoneX 留出底部安全距离	boolean	true

GoodsActionIcon Props

参数	说明	类型	默认值
text	按钮文字	string	-
icon	图标类型，可选值见icon组件	string	-
info	图标右上角提示信息	string/ number	-
url	点击后跳转的链接地址	string	-
link-type	链接跳转类型，可选值为 redirectTo switchTab reLaunch	string	navigateTo
id	标识符	string	-
disabled	是否禁用按钮	boolean	false
loading	是否显示为加载状态	boolean	false
open-type	微信开放能力，具体支持可参考微信官方文档	string	-
app-parameter	打开 APP 时，向 APP 传递的参数	string	-
lang	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文	string	en
session-from	会话来源	string	-
send-message-title	会话内消息卡片标题	string	当前标题
send-message-path	会话内消息卡片点击跳转小程序路径	string	当前分享路径
send-message-img	sendMessageImg	string	截图
show-message-card	显示会话内消息卡片	string	false
class-prefix v1.10.1	类名前缀	string	van-icon

GoodsActionButton Props

参数	说明	类型	默认值
text	按钮文字	string	-
color	按钮颜色，支持传入 linear-gradient 渐变色	string	-
url	点击后跳转的链接地址	string	-
link-type	链接跳转类型，可选值为 redirectTo switchTab reLaunch	string	navigateTo
id	标识符	string	-
type	按钮类型，可选值为 primary warning danger	string	danger
plain	是否为朴素按钮	boolean	false
size	按钮尺寸，可选值为 normal large small mini	string	normal
disabled	是否禁用按钮	boolean	false
loading	是否显示为加载状态	boolean	false
open-type	微信开放能力，具体支持可参考微信官方文档	string	-
app-parameter	打开 APP 时，向 APP 传递的参数	string	-
lang	指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文	string	en
session-from	会话来源	string	-
send-message-title	会话内消息卡片标题	string	当前标题
send-message-path	会话内消息卡片点击跳转小程序路径	string	当前分享路径
send-message-img	sendMessageImg	string	截图
show-message-card	显示会话内消息卡片	string	false

Events

事件名	说明	参数
bind:click	按钮点击事件回调	-

GoodsActionIcon Slot

名称	说明
icon	自定义图标

GoodsActionButton Slot

名称	说明
/	按钮显示内容

GoodsActionIcon 外部样式类

名称	说明
icon-class	图标样式类
text-class	文字样式类

GoodsActionButton 外部样式类

名称	说明
custom-class	根节点样式类

一、商品详情页面说明和商品导航

<!--pages/goods/index.wxml-->
<swiper indicator-dots style="height:300px;"><block wx:for="{{goodsImages}}" wx:key="*this"><swiper-item><van-image lazy-load loading="loading" fit="cover" width="100%" height="300" src="{{item.content}}" /></swiper-item></block>
</swiper>
<!-- 标题及价格 -->
<view style="background-color:white;padding: 10px 15px 0;font-family:'微软雅黑'"><view style="color:#C0A769;"><text style="font-size:11px;">￥</text><text style="font-size:18px;">{{goodsData.start_price}}</text></view><van-row><van-col span="16"><view style="color:black;font-size:16px;">{{goodsData.goods_name}}</view></van-col><van-col span="8" style="text-align:right;"><view class="iconfont icon-share share"> 分享</view></van-col></van-row><view style="color:#939697;font-size:11px;">{{goodsData.goods_desc}}</view>
</view>
<!-- 运费说明 -->
<van-cell-group border="{{false}}"><van-cell class="buydesc" title="全程护航，请放心购买" is-link />
</van-cell-group><van-cell-group title=" "><van-cell value="" is-link><view slot="title"><text style="float: left;padding-right: 10px;font-size: 13px;color: gray;">运费</text><view>免运费</view></view></van-cell>
</van-cell-group>
<!-- 商品规格 -->
<van-cell-group title=" "><van-cell value="" is-link><view slot="title"><text style="float: left;padding-right: 10px;font-size: 13px;color: gray;">服务</text><view>收货后结算</view></view></van-cell><van-cell value="" is-link bind:click="showSkuPanelPopup"><view slot="title"><text style="float: left;padding-right: 10px;font-size: 13px;color: gray;">规格</text><view>{{selectedGoodsSkuObject.text || "选择"}}</view></view></van-cell>
</van-cell-group>
<!-- 商品描述 -->
<view style="padding:10px 10px 100px;"><van-image wx:for="{{goodsImages}}" wx:key="content" lazy-load loading="loading" fit="cover" width="100%" height="300" src="{{item.content}}" /><text>{{goodsContentInfo.content}}</text>
</view>
<!-- 购物车 -->
<van-goods-action><van-goods-action-icon icon="cart-o" text="购物车" info="0" /><van-goods-action-icon icon="shop-o" text="店铺" /><van-goods-action-button bindtap="addToCart" text="加入购物车" type="warning" /><van-goods-action-button text="立即购买" />
</van-goods-action>

/* pages/goods/index.wxss *//* miniprogram/pages/goods/index.wxss */
.price .van-cell__title{color: rgba(181,154,81,1);font-size: 20pt;
}
.title .van-cell__title{font-size: 17pt;
}
.buydesc .van-cell__title{font-size: 13px;
}
.share{font-size:11px;background-color:#F5F9FA;color:#767A7B;border-radius:30px;padding: 5px 10px;margin-right: -27px;width: 50px;text-align: center;float: right;
}
.van-tag{margin-left: 10px;
}
.van-popup{background-color: #efefef;
}

// miniprogram/pages/goods/index.js
Page({/*** 页面的初始数据*/data: {showLoginPanel:false,showSkuPanel: false,goodsId:0,goodsData:{},goodsImages: [],goodsContentInfo:{},goodsSkuData:{},selectedGoodsSku:{},selectedAttrValue:{},selectedGoodsSkuObject:{}},/*** 生命周期函数--监听页面加载*/onLoad: async function (options) {let goodsId = options.goodsIdthis.data.goodsId = goodsIdconst eventChannel = this.getOpenerEventChannel()eventChannel.on('goodsData', (res)=> {console.log(res)let goodsImages = res.data.goods_infos.filter(item=>(item.kind == 0))let goodsContentInfo = res.data.goods_infos.filter(item=>(item.kind == 1))[0]this.setData({goodsData:res.data,goodsImages,goodsContentInfo})})// 拉取sku规格数据let goodsSkuDataRes = await wx.wxp.request({url: `http://localhost:3000/goods/goods/${goodsId}/sku`,})if (goodsSkuDataRes){let goodsSkuData = goodsSkuDataRes.data.data this.setData({goodsSkuData})}},})

{"usingComponents": {"van-image": "@vant/weapp/image/index","van-row": "@vant/weapp/row/index","van-col": "@vant/weapp/col/index","van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index","van-popup": "@vant/weapp/popup/index","van-button": "@vant/weapp/button/index","van-tag": "@vant/weapp/tag/index","van-goods-action": "@vant/weapp/goods-action/index","van-goods-action-icon": "@vant/weapp/goods-action-icon/index","van-goods-action-button": "@vant/weapp/goods-action-button/index","LoginPanel":"../../components/login"}
}

二、效果

【愚公系列】2022年10月微信小程序-电商项目-商品详情页面说明和商品导航相关推荐

【愚公系列】2022年10月微信小程序-电商项目-商品详情页面规格选择功能实现
文章目录前言一.商品详情页面规格选择功能实现二.效果前言 vant-weapp的Popup 弹出层api Props 参数说明类型默认值 show 是否显示弹出层 boolean fal ...
【愚公系列】2022年10月微信小程序-电商项目-商品购物车功能实现
文章目录前言一.商品购物车功能实现二.效果前言在电商的核心交易流程中,购物车是其中非常重要的一环,它承担商品加购.价格计算.促销活动展示等功能,与会员系统.商品系统.库存系统.订单系统等紧密 ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付后端功能实现（node版）
文章目录前言一.微信支付后端功能实现(node版) 1.相关文档 2.项目配置前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以"微 ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付小程序确认支付结果和退款功能实现（node）
文章目录前言一.微信支付小程序确认支付结果和退款功能实现 1.确认支付结果 2.退款功能实现前言微信小程序在支付成功后会给注册的接口发消息来通知订单支付成功的状态,下面是微信和接口通信的数据格 ...
【愚公系列】2022年10月微信小程序-电商项目-小微商户支付后端功能实现（node版）
文章目录前言一.小微商户支付后端功能实现(node版) 1.相关文档 2.项目配置前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以" ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付功能前申请准备工作
文章目录前言一.微信支付功能实现 1.微信公众平台的准备 2.微信商户平台的准备前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以" ...
【愚公系列】2022年10月微信小程序-电商项目-小微商户支付功能前申请准备工作
文章目录前言一.小微商户支付功能前申请准备工作 1.小微商户支付相关文档和流程 2.签约前言小微商户是指依据法律法规和相关监管规定免予办理工商注册登记.无营业执照的实体特约商户. 1.小微商户 ...
【愚公系列】2022年10月微信小程序-电商项目-确认订单功能实现
文章目录前言一.确认订单功能实现二.效果前言订单创建是从用户下单开始的,当用户对商品进行下单后,系统会引导用户来到确认订单页面,此时系统会获取用户预下单的商品信息,同时判断商品是否涉及到优惠 ...
【愚公系列】2022年10月微信小程序-电商项目-UI设计之蓝湖的使用
文章目录前言一.UI设计之蓝湖的使用 1.下载插件 2.生成代码 3.配置代码前言蓝湖是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图.蓝湖可以在线展示Axure,自动生 ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...

【愚公系列】2022年10月微信小程序-电商项目-商品详情页面说明和商品导航

文章目录

前言

一、商品详情页面说明和商品导航

二、效果

【愚公系列】2022年10月微信小程序-电商项目-商品详情页面说明和商品导航相关推荐

最新文章

热门文章

【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面说明和商品导航

文章目录

前言

一、商品详情页面说明和商品导航

二、效果

【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面说明和商品导航相关推荐

最新文章

热门文章

【愚公系列】2022年10月微信小程序-电商项目-商品详情页面说明和商品导航

【愚公系列】2022年10月微信小程序-电商项目-商品详情页面说明和商品导航相关推荐