【Vant Weapp】van-cell 单元格

宾果的救星

已于 2022-11-17 13:53:18 修改

阅读量6.5k

点赞数 4

分类专栏：微信小程序文章标签：前端

于 2022-11-12 03:00:00 首次发布

本文链接：https://blog.csdn.net/wuli_youhouli/article/details/127746255

版权

微信小程序专栏收录该内容

19 篇文章 1 订阅

订阅专栏

自定义内容

自定义右侧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
  })
},