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

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

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

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

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

//这是定义的全局样式，直接引入使用即可
 @import "../style/global";
 
 .body {
  background: white;
  .message {
   margin-top: 10px;
   display: flex;
   width: 100%;
   height: 100px;
   align-items: center;
   border-bottom: 1px solid #e8e8e8;
   justify-content: space-between;
  }
  .label {
   color: #333;
   margin-left: 20px;
   font-size: @font-size-normal;
  }
  .messageOne {
   image {
    height: 80px;
    width: 120px;
    margin-right: 20px;
    
   }
  }
  input {
   padding-left: 20px;
   
   color: #333;
   font-size: @font-size-normal;
   text-align: right;
   margin-right: 20px;
   width: 80%;
  }
  .submit {
   position: fixed;
   bottom: 20px;
   left: 36px;
   width: 90%;
   background-color: #ea3333;
   color: #fff;
  }
 }
 
 .container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
 }
 
 .backimg {
  height: 250px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 40%, rgba(255, 255, 255, 1) 98%, #FFFFFF 100%);
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
 }
 
 .touxiang_area {
  height: 250px;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 10px solid #e7e7eb;
  width: 100%;
  vertical-align: middle;
  position: absolute;
 }
 
 .touxiang_view {
  display: inline-block;
  width: 35%;
 }
 
 .touxiang_view > image {
  width: 130px;
  height: 130px;
  border-radius: 100%;
  margin-top: 25%;
  margin-left: 25%;
 }
 
 .touxiang-text {
  display: inline-block;
  width: 400px;
  position: absolute;
  top: 40%;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 
 .touxiang-text > text {
  font-size: 32px;
 }
 
 .touxiang_area > text {
  margin-top: 20px;
 }
 
 .city {
  
  padding-bottom: 15px;
  font-size: 30px;
 }
 
 .city > text {
  font-size: 30px;
 }
 
 .name {
  overflow: hidden;
  width: 250px;
  display: inline-block;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 
 button::after {
  border: none;
 }
 
 input {
  outline: none;
  border: none;
  list-style: none;
 
 }

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

 

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

 @import "../style/global";
 .van-radio__icon--checked{
  color:@theme-color !important;
 }

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

这是没有选择时的情况：

选择时：

点击北大之后：

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

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

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

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

再来看一下设计图

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

最后看一下最终效果

补充：

获取选中规格的方法

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

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

代码示例如下:

打印结果：

以上这篇wepy--用vantUI 实现上弹列表并选择相应的值操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。