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

<template>
 <view class="container">
  <image src="/UploadFiles/2021-04-02/{{localUser.avatarUrl}}">




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


<template>
//同样我们先去定义模板
//showPopup 就是传递进来控制显示与不显示的值
//onclose方法则是主动关闭弹出层 
//position控制的则是从底部弹出
 <van-popup show="{{ showPopup }}" bind:close="onPopup" position="bottom">
  <van-radio-group value="{{ lastSchool.id }}">
   <van-cell-group>
//对赋值的数组进行遍历
    <repeat for="{{ locationList }}">
//定义一个点击之间去调用我们再父组件当中绑定定义的向外传递参数的方法，将括号当中的当前的item
//传递出去
     <van-cell title="{{item.name}}" clickable @tap="onClick({{item}})">
      <van-radio name="{{item.id}}" >
      </van-radio>
     </van-cell>
    </repeat>
   </van-cell-group>
 
  </van-radio-group>
 </van-popup>
</template>
 
<script>
 
 import wepy from 'wepy';
//我们用component 去定义一个组件
 export default class myTabBar extends wepy.component {
//用props去去声明页面所需要的参数，这些值是再父组件调用子组件的时候，绑定在组件上面传递进来的
  props = {
   lastSchool: {
    type: Object,
    twoWay: true
   }
  };
//data则是父组件，或者是调用后端接口去赋值的属性
  data = {
   showPopup: false,
   locationList: []
  };
 
  onLoad() {
 
//在这里我是事先将学校列表存入到缓存当中去使用的
//所以这里不会再去调用后端的接口 去获取值
   let locationList = wepy.getStorageSync('locationList');
   console.log('popup load');
   if (locationList) {
    this.locationList = locationList;
   }
  }
  methods = {
//这个方法就是在上面定义的点击某头条信息的时候触发的方法，会将showPopup的逻辑值改变，从而控制
//显示还是不显示
   onPopup(event) {
    console.log('close', event);
    this.showPopup = !this.showPopup;
   },
//点击事件则是去向父组件去传递值
//用到的就是emit 在这里需要注意的是 若是传递一个组件直接写上就行，若是传递多个值，则要将其封装
//成一个对象再向外去传递相应的值
   onClick(item, e) {
    console.log('item', item, e);
    this.lastSchool = item;
    this.$emit('setLocationId', item);
    this.showPopup = !this.showPopup;
   },
     };
 };
</script>
//下面是一些自定义的样式
<style lang="less">
 @import "../style/global";
 .van-radio__icon--checked{
  color:@theme-color !important;
 }
</style>






下面我们来看几张效果图： 
这是没有选择时的情况：

选择时：

点击北大之后：

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

以上就是一个见简单的，弹出层demo
补充知识：vantUI的sku组件的使用（增加自定义提示信息、自定义按钮获取sku的选中值）
最近在做的移动电商项目，因为vantUI开发商城比较方便，最后决定使用vue结合vantUI结合开发，在使用sku组件的时候遇到了问题，先看一下使用了sku的效果图，




再来看一下设计图



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



最后看一下最终效果




补充：
获取选中规格的方法
1、首先给标签添加ref属性



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



代码示例如下:


打印结果：



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