前言

vant-weapp的Layout布局api

Row Props

参数	说明	类型	默认值
gutter	列元素之间的间距（单位为 px）	string/number	-

Col Props

参数	说明	类型	默认值
span	列元素宽度	string /number	-
offset	列元素偏移距离	string / number	-

外部样式类

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

基础使用：
Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

<van-row><van-col span="8">span: 8</van-col><van-col span="8">span: 8</van-col><van-col span="8">span: 8</van-col>
</van-row><van-row><van-col span="4">span: 4</van-col><van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row><van-row><van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row><van-row gutter="20"><van-col span="8">span: 8</van-col><van-col span="8">span: 8</van-col><van-col span="8">span: 8</van-col>
</van-row>

一、商品详情页面的轮播图功能实现

<!--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>

/* 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月微信小程序-电商项目-商品详情页面的标题及价格功能实现相关推荐