vscode开发小程序之使用vant weapp组件van-cell

项目要写这样一个页面，之前一直只用微信小程序开发工具开发的我没用过移动端的组件库，后知后觉的我，眼泪掉下来。真的太好用了吧！

vant Weapp组件库文档

看到这个页面，首先想到的是用van-field标签，因为可以直接设置*和输入框。但是写到所在城市的时候，请选择那里是一个link链接跳转页面，这时，设置van-field有一个is-link的属性，设置之后，将value值改成请选择，设置只读属性，就能出现上图效果了。

但是有一个问题就是，这个官网没有对应的点击事件，只好换成van-cell标签

           

                *所在城市

           

           请选择

这样就可以解决点击事情了。那么，问题也来了，van-cell的内间距跟van-feild的不一样，对不齐很难看，又继续研究文档，将所有的都换成van-cell标签。

代码如下：

这里做一个说明，因为是用组件库新手小白，slot是插槽，就是如果官方提供的不能满足你的开发需求，可以通过这个来自定义

比如van-cell中官网给的默认形式：

value只是一个文字形式，那我想改成输入框怎么办呢，就如上述代码

               

 

拓展：cell分割线如何去掉？设置border：none！important；竟然不生效？

css代码如下：
.van-cell{

    border: none !important;

}

还需设置van-cell的自定义样式，用costom-class='vancellStyle'

.vancellStyle{

    position: static !important;

    height:120rpx;

}

就可以实现去掉那条横线啦~