admin管理员组文章数量:1586729
目录
自定义内容
自定义右侧value(姓名手机号)
自定义右侧value(文件预览)
自定义下方label描述信息
真机border相当明显
修改样式(下边框、文字)
循环列表中的cell
自定义内容
自定义右侧value(姓名手机号)
<van-cell-group>
<van-cell title="经理">
<view>张三<view class="blue">15952011111</view></view>
</van-cell>
</van-cell-group>
自定义右侧value(文件预览)
<van-cell-group>
<van-cell title="附件">
<view style="color: blue;" bindtap="open">1.doc</view>
</van-cell>
</van-cell-group>
open() {
let url = this.data.url
wx.downloadFile({
url: url,
success: function (res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function (res) {}
})
}
})
}
自定义下方label描述信息
<van-cell title="电话" use-label-slot >
<view slot="label">
<view>张三</view>
<view class="blue">15952086506</view>
</view>
</van-cell>
真机border相当明显
<van-cell title="单元格" is-link value="内容" border="{{ false }}"/>
<van-cell title="单元格" is-link value="内容" border="{{ false }}"/>
<van-cell title="单元格" is-link value="内容" border="{{ false }}"/>
修改样式(下边框、文字)
.van-cell {
border-radius: 30rpx;
margin: 20rpx 0 0 0;
}
/* 去除单元格cell下边框 */
.van-cell:after {
border-bottom: none !important;
border-bottom-style: none !important;
}
/* 单元格标题title */
.van-cell .van-cell__title {
color: #7186e1;
}
/* 标题下方label */
.van-cell .van-cell__label {
color: #000;
font-weight: 500;
}
循环列表中的cell
model:value在循环列表中无法实现响应式,必须通过onChange重新赋值。
<view class="list">
<view class="item" wx:for-items="{{list}}" wx:key='index'>
<van-cell-group>
<van-field model:value="{{ item.desc }}"
type="textarea"
placeholder="请输入描述"
autosize
border="{{ false }}"
data-item="{{item}}"
data-index="{{index}}"
bind:change="onChange"
/>
</van-cell-group>
</view>
</view>
onChange(event) {
let name = event.detail
let index = event.currentTarget.dataset.index
const data = 'list['+index+'].desc'
this.setData({
[data]: name
})
},
版权声明:本文标题:【Vant Weapp】van-cell 单元格 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1726918107a1090373.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论