您现在的位置是:首页 > Javascript
当前栏目
【Vant Weapp】van-cell 单元格
2023-03-31 10:43:44 时间
目录
自定义内容
自定义内容
自定义右侧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
})
},
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件