前言
vant-weapp的van-cell单元格api
CellGroup Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 分组标题 | string | - |
| inset v1.7.2 | 是否展示为圆角卡片风格 | boolean | false |
| border | 是否显示外边框 | boolean | true |
CellGroup 外部样式类
| 类名 | 说明 |
|---|---|
| custom-class | 根节点样式类 |
Cell Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | string | - |
| title | 左侧标题 | string/number | - |
| title-width | 标题宽度，须包含单位 | string | - |
| value | 右侧内容 | string / number | - |
| label | 标题下方的描述信息 | string | - |
| size | 单元格大小，可选值为 large | string | - |
| border | 是否显示下边框 | boolean | true |
| center | 是否使内容垂直居中 | boolean | false |
| url | 点击后跳转的链接地址 | string | - |
| link-type | 链接跳转类型，可选值为 redirectTo switchTab reLaunch | string | navigateTo |
| clickable | 是否开启点击反馈 | boolean | false |
| is-link | 是否展示右侧箭头并开启点击反馈 | boolean | false |
| required | 是否显示表单必填星号 | boolean | false |
| arrow-direction | 箭头方向，可选值为 left up down | string | - |
| use-label-slot | 是否使用 label slot | boolean | false |
| title-style v1.4.0 | 标题样式 | string | - |
Cell Event
| 事件名 | 说明 | 参数 |
|---|---|---|
| bind:click | 点击单元格时触发 | - |
Cell Slot
| 名称 | 说明 |
|---|---|
| / | 自定义value显示内容，如果设置了value属性则不生效 |
| title | 自定义title显示内容，如果设置了title属性则不生效 |
| label | 自定义label显示内容，需要设置 use-label-slot属性 |
| icon | 自定义icon显示内容，如果设置了icon属性则不生效 |
| right-icon | 自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效 |
Cell 外部样式类
| 类名 | 说明 |
|---|---|
| custom-class | 根节点样式类 |
| title-class | 标题样式类 |
| label-class | 描述信息样式类 |
| value-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>
/* 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.goodsId
this.data.goodsId = goodsId
const 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
}
}
二、效果
