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


Posted in Javascript onNovember 03, 2020

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

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

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

<template>
 <view class="container">
  <image src="{{localUser.avatarUrl}}" class="backimg" mode="aspectFill">
   <view class='backimg' style='position:absolute;top:0;height:300rpx;width:100%;'></view>
  </image>
  <view class="touxiang_area">
   <view class="touxiang_view">
    <image src="{{localUser.avatarUrl}}" catchtap="changePic"></image>
   </view>
   <view class='touxiang-text'>
    <text catchtap="changeName" class='name'>{{localUser.nickName}}</text>
   </view>
  </view>
  <view style="margin-top:125px;">
   <van-cell-group>
    <block wx:if="{{saLogined}}">
     <van-cell title="关联公众号" icon="add-o" >
      已关注
     </van-cell>
    </block>
    <block wx:else>
     <van-cell title="关联公众号" icon="add-o" url="/pages/authPage" is-link>
     </van-cell>
    </block>
 
    <van-cell title="编辑" icon="edit"></van-cell>
   </van-cell-group>
  </view>
  <view class="body">
   <form bindsubmit="formSubmit">
    <view class="message messageTwo">
     <view class="label">姓名</view>
     <input placeholder="请输入您的真实姓名" placeholder-class="place" name="realName" value="{{realName}}"
         confirm-type="done" />
    </view>
    <view class="message messageThree">
     <view class="label">电话</view>
     <input placeholder="请输入您的电话" placeholder-class="place" name="phone" value="{{phone}}" confirm-type="done" />
    </view>
//此处引用的是vant的 cellGroup
//cell可以单独使用也可以配合group来使用,只不过不同的是:
//CellGroup可以为Cell提供上下外边框 其余的属性值 大家可以自行去官网看他的意思
//title代表的是你的者一行 选择的主题是什么 
//value就是选择的相应的值 在刚开始的时候可以给一个默认值
// location: {
 //    id: -1,
 //    name: '未选择'
 //  },
 
//之后再更具获取到的值去替换
//@tap是绑定在他上面的方法。这里我主要是用它去invoke来给子组件当中的属性去赋值
    <van-cell-group>
     <van-cell
      title="所在位置"
      is-link
      value="{{location.name}}"
      @tap="popup"
     >
     </van-cell>
     </van-cell-group>
 //下面是一个按钮,按照提交的状态去变化一下按钮的内容
    <bolck>
 
     <button form-type='submit' class="submit">{{submit ? '重新提交': '提交'}}</button>
    </bolck>
   </form>
  </view>
  
 </view>
//下面这个就是我定义的选择组件 传递了两个值 showPopup来控制显示还是不显示
//setLocationId则是用来给父组件传递信息的方法
 
//在这里需要注意的是 根据值传递的方向 是有不同的传递方法的 大家可以去参阅我的另一篇博客 写了传
//递值的几种方式
 <chooseSchoolPopup :show.sync="showPopup" v-on:setLocationId="setLocationId">
 
 </chooseSchoolPopup>
</template>
<script>
 import wepy from 'wepy';
 
 import {
  SYSTEM_INFO,
  USER_INFO,
  TOKEN
 } from '@/utils/constant';
//request是我粉装的用来请求后端接口的方法
 import { request } from '../utils/util';
//在这里首先引入组件,但是引入之后别忘了在地下声明
 import chooseSchoolPopup from '../components/chooseSchoolPopup';
//我们根据page去定义一个页面
 export default class UserInfo extends wepy.page {
//这里就是将你引入的组件做了声明
  components = {
   chooseSchoolPopup: chooseSchoolPopup,
  };
//定义一些页面所用到的数据
  data = {
   active: 4,
   localUser: {},
   saLogined: false,
   phone: '',
   realName: '',
   submit: false,
   location: {
    id: -1,
    name: '未选择'
   },
   showPopup: true,
   location_id:null
  };
//这个则是定义页面的一些属性,以及将页面所要用到的ui组件导入进来
//这里需要注意的是,在父组件当中引入的组件,在子组件当中依旧是可以用的
  config = {
   navigationBarTitleText: '我的',
   usingComponents: {
    'van-cell': '../components/van/cell/index',
    'van-cell-group': '../components/van/cell-group/index',
    'van-row': '../components/van/row/index',
    'van-col': '../components/van/col/index',
    'van-field': '../components/van/field/index',
    'van-popup': '../components/van/popup/index',
   }
  };
//在这里onshow方法我们将用户的基本信息去获取一遍,包括他的位置
  async onShow(){
   let servant = await request('/servant/getSelfInfo');
   this.saLogined = servant.saLogined;
   this.location = servant.location;
   console.log('user onShow', servant);
   this.$apply();
  }
//onload当中我们同样在最初加载页面的时候去获取一遍
  async onLoad() {
   let user = wepy.getStorageSync(USER_INFO);
   this.localUser = user;
   try {
    let servant = await request('/servant/getSelfInfo');
    console.log('user onLoad', servant);
    this.realName = servant.realName;
    this.phone = servant.phone;
    this.location = servant.location ? servant.location.name : null;
    this.saLogined = servant.saLogined;
    this.$apply();
 
   } catch (e) {
    console.error(e);
   }
  }
 
  //来定义一些页面用到的方法
  methods = {
//这个方法就是用来子组件向父组件传值的,将组件里选择条目的整条信息传递过来
//我们赋值给页面的参数,然后再页面上面去显示出来
//注意 若是你的方法是同步的,则组要手动去调用this.$apply();才能将值赋值给变量
   setLocationId(e){
    console.log('setLocationId',e)
    this.location_id =e.id
    this.location = e
   },
//这个方法则是用来调用子组件内的方法,去给子组件的属性赋值
//用的就是invoke方法 ,
//第一个参数是你要往那个组件里面赋值,第二个是,相应组件里面的方法是什么,
//当然再这里我是直接再子组件当中去赋值的,所以这里没有去传递任何的值
//你可以传递一个或者是多个的值,只要再相应的方法当中去接受即可
   popup() {
    this.$invoke('chooseSchoolPopup', 'onPopup');
   },
//这是一个提交form表单里面内容的方法
   async formSubmit(e) {
    var value = e.detail.value;
    console.log('formSubmit', e.detail);
    var params = {
     realName: value.realName,
//这个id就是再子组件当中传递出来的值
     location_id: this.location_id,
     phone: value.phone
    };
    console.log('formSubmit',params)
//调用我后端编写的方法去提交
    try {
     await request('/servant/emdit/self', {
      method: 'POST',
      data: params
     });
     this.submit = true;
     this.$apply();
    } catch (e) {
     console.log(e);
    }
   }
 
  };
 }
</script>
//一下是一些样式 使用的是less分割
<style lang="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;
    /*border-radius: 50%;*/
   }
  }
  input {
   padding-left: 20px;
   /*flex: 1;*/
   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%;
  /* line-height: 60rpx; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 
 .touxiang-text > text {
  font-size: 32px;
 }
 
 .touxiang_area > text {
  margin-top: 20px;
 }
 
 .city {
  /* margin-top:10rpx; */
  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;
 
 }
</style>

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

<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>

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

这是没有选择时的情况:

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 实现上弹列表并选择相应的值操作

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

Javascript 相关文章推荐
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
如何基于js判断浏览器版本
Feb 20 Javascript
使用vant的地域控件追加全部选项
Nov 03 #Javascript
vue vant中picker组件的使用
Nov 03 #Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 #Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 #Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 #Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 #Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 #Javascript
You might like
1.PHP简介
2006/10/09 PHP
PHP中GET变量的使用
2006/10/09 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
python学习手册中的python多态示例代码
2014/01/21 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
关于读书的演讲稿400字
2014/08/27 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
运动会稿件100字
2014/09/24 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2015新年寄语大全
2014/12/08 职场文书