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

  介绍

今天就跟大家聊聊有关wepy中使用vantUI如何实现上弹列表并选择相应的值,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

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

& lt; template>   & lt;视图类=癱ontainer"祝辞   https://www.yisu.com/zixun/& lt;图像src=" {{localUser.avatarUrl}}”类==癮spectFill”>“backimg”模式   <视图类=癰ackimg”风格=':绝对;:0;高度:300 rpx;宽度:100%;">   <视图类=" touxiang_view ">         <视图类=皌ouxiang-text”>   <文本catchtap=" changeName”类=懊? {{localUser.nickName}}         <视图>      <块wx:如果=" {{saLogined}} ">      已关注         其他<块wx:>                        <视图类=吧硖濉?   <形式bindsubmit=" formSubmit ">   消息messageTwo <视图类=" ">   <视图类="标签">姓名   <输入占位符="请输入您的真实姓名“占位符类=暗胤健钡拿?realName " value=" {{realName}}   confirm-type="做"/>      消息messageThree <视图类=" ">   <视图类="标签">电话   <输入占位符="请输入您的电话”占位符类=暗胤健钡拿?"电话" value="{{电话}}" confirm-type="做"/>   //此处引用的是vant的cellGroup//细胞可以单独使用也可以配合集团来使用,只不过不同的是://CellGroup可以细胞为提供上下外边框其余的属性值大家可以自行去官网看他的意思//标题代表的是你的者一行选择的主题是什么//值就是选择的相应的值在刚开始的时候可以给一个默认值//位置:{//id: 1、//名称:“未选择的//},//之后再更具获取到的值去替换//@tap是绑定在他上面的方法。这里我主要是用它去调用来给子组件当中的属性去赋值         //下面是一个按钮,按照提交的状态去变化一下按钮的内容         <按钮的表单类型==疤峤弧?“提交”类{{提交& # 63;“重新提交的:“提交的}}>      //下面这个就是我定义的选择组件传递了两个值showPopup来控制显示还是不显示//setLocationId则是用来给父组件传递信息的方法//在这里需要注意的是根据值传递的方向是有不同的传递方法的大家可以去参阅我的另一篇博客写了传//递值的几种方式          脚本   从“进口wepy wepy ';      进口{   SYSTEM_INFO,   USER_INFO,   令牌   从“@/跑龙套常数”};//请求是我粉装的用来请求后端接口的方法   进口{请求}“. ./跑龙套/util”;//在这里首先引入组件,但是引入之后别忘了在地下声明   从“. ./组件/导入chooseSchoolPopup chooseSchoolPopup”;//我们根据页面去定义一个页面   导出用户信息扩展wepy默认类。页面{//这里就是将你引入的组件做了声明   组件={   chooseSchoolPopup: chooseSchoolPopup,   };//定义一些页面所用到的数据   data={   活动:4   localUser: {},   saLogined:假的,   电话:”,   realName:”,   提交:假的,   地点:{   id: 1、   名称:“未选择的   },   showPopup:没错,   location_id:零   };//这个则是定义页面的一些属性,以及将页面所要用到的ui组件导入进的来//这里需要注意的是,在父组件当中引入的组件,在子组件当中依旧是可以用的   配置={   navigationBarTitleText:‘我的’,   usingComponents: {   “van-cell”:“. .//车/电池/组件指数”,   “van-cell-group”:“. ./组件/车/小组/指数”,   “van-row”:“. ./组件/车/行/指数”,   “van-col”:“. ./组件/车/坳/指数”,   “van-field”:“. ./组件/车/?指数”,   “van-popup”:“. ./组件/车/弹出/指数”,   }   };//在这里昂秀方法我们将用户的基本信息去获取一遍,包括他的位置   异步> & lt; template>//同样我们先去定义模板//showPopup就是传递进来控制显示与不显示的值//onclose方法则是主动关闭弹出层//位置控制的则是从底部弹出   & lt; van-popup显示=皗{showPopup}},绑定:关闭=皁nPopup"位置=癰ottom"比;   & lt; van-radio-group值=https://www.yisu.com/zixun/眥{lastSchool。id}} ">   

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