wepy中使用vantUI 如何实现上弹列表并选择相应的值_程序开发

创始人

2024-11-18 07:01:59

0次

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



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

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


 

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

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

这是没有选择时的情况：

wepy中使用vantUI 如何实现上弹列表并选择相应的值

选择时：

wepy中使用vantUI 如何实现上弹列表并选择相应的值

点击北大之后：

wepy中使用vantUI 如何实现上弹列表并选择相应的值

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

wepy中使用vantUI 如何实现上弹列表并选择相应的值

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

补充知识：vantUI的sku组件的使用（增加自定义提示信息、自定义按钮获取sku的选中值）

最近在做的移动电商项目，因为vantUI开发商城比较方便，最后决定使用vue结合vantUI结合开发，在使用sku组件的时候遇到了问题，先看一下使用了sku的效果图，

wepy中使用vantUI 如何实现上弹列表并选择相应的值

再来看一下设计图

wepy中使用vantUI 如何实现上弹列表并选择相应的值

很明显少了一句提示，只需要写一个插槽来实现就可以了

wepy中使用vantUI 如何实现上弹列表并选择相应的值

最后看一下最终效果

wepy中使用vantUI 如何实现上弹列表并选择相应的值

补充：

获取选中规格的方法

1、首先给标签添加ref属性

wepy中使用vantUI 如何实现上弹列表并选择相应的值

2、在你需要获取规格的事件中直接用this.$refs.(ref的属性值).(官方提供的getSkuData方法)获取就可以了

wepy中使用vantUI 如何实现上弹列表并选择相应的值

代码示例如下:

wepy中使用vantUI 如何实现上弹列表并选择相应的值

打印结果：

wepy中使用vantUI 如何实现上弹列表并选择相应的值