您现在的位置是：主页 > news > wordpress演示站/百度快照投诉中心
wordpress演示站/百度快照投诉中心
admin2025/5/1 19:28:39【news】
简介wordpress演示站,百度快照投诉中心,为什么不禁止营销号,商丘哪里教做网站的文章目录前言一、商品详情页面说明和商品导航二、效果前言 vant-weapp的van-goods-action商品导航api GoodsAction Props 参数说明类型默认值safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue GoodsActionIcon Props 参数说明类型默认值text按钮文字stri…
wordpress演示站,百度快照投诉中心,为什么不禁止营销号,商丘哪里教做网站的文章目录前言一、商品详情页面说明和商品导航二、效果前言
vant-weapp的van-goods-action商品导航api
GoodsAction Props
参数说明类型默认值safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue
GoodsActionIcon Props
参数说明类型默认值text按钮文字stri…
文章目录
- 前言
- 一、商品详情页面说明和商品导航
- 二、效果
前言
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"}
}
二、效果
