wepy--用vantUI 实现上弹列表并选择相应的值

vantUI就不多做介绍了,是一个相对来说比较好用的ui组件库,下面是地址大家可以自己去看看:

https://youzan.github.io/vant/#/zh-CN/actionsheet

接下来我们直接进入正题,在这个demo当中我是将这个弹出层封装成为一个组件,来供定义的页面去调用的,所以我们首先要做的就是先定义一个页面,在定义一个组件:下面是代码:



//一下是一些样式 使用的是less分割

 以上就是定义页面的及其属性方法的代码,下面我们来看一下相应组件的代码:




//下面是一些自定义的样式

下面我们来看几张效果图: 

这是没有选择时的情况:

wepy--用vantUI 实现上弹列表并选择相应的值_第1张图片

选择时:

wepy--用vantUI 实现上弹列表并选择相应的值_第2张图片

点击北大之后:

wepy--用vantUI 实现上弹列表并选择相应的值_第3张图片

最后提交:提交时的参数:

wepy--用vantUI 实现上弹列表并选择相应的值_第4张图片

以上就是一个见简单的,弹出层demo

版权声明:本文为博主原创文章,未经博主允许不得转载。https://blog.csdn.net/qq_42112846

 

 

你可能感兴趣的:(WEPY)