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 相关文章推荐
jquery里的正则表达式说明
Aug 03 Javascript
jquery 插件学习(五)
Aug 06 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
js导出txt示例代码
2014/01/14 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Python 读写文件的操作代码
2018/09/20 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
会计自我鉴定
2013/11/02 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
学生会竞聘书范文
2014/03/31 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python