温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序选择器怎么用

发布时间:2022-03-10 14:39:22 来源:亿速云 阅读:225 作者:iii 栏目:开发技术

这篇文章主要介绍“微信小程序选择器怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序选择器怎么用”文章能帮助大家解决问题。

页面结构

  1. <!--pages/warn/index.wxml-->

  2. <view class="container">

  3.     <view class="choose">

  4.         <view class="title">请选择故障类型</view>

  5.         <checkbox-group bindchange="checkboxChange" class="choose-grids">

  6.             <!-- itemsValue是data对象里定义的数组,item代表数组的每一项,此处语法为循环输出数组的每一项并渲染到每一个复选框。下面还有类似语法 -->

  7.             <block wx:for="{{itemsValue}}" wx:key="{{item}}">

  8.                 <view class="grid">

  9.                     <checkbox value="{{item.value}}" checked="{{item.checked}}" color="{{item.color}}" />{{item.value}}

  10.                 </view>

  11.             </block>

  12.         </checkbox-group>        

  13.     </view>

  14.     <view class="action">

  15.         <view class="title">拍摄单车周围环境,便于维修师傅找车</view>

  16.         <view class="action-photo">

  17.         <block wx:for="{{picUrls}}" wx:key="{{item}}" wx:index="{{index}}">

  18.             <image src="{{item}}"><icon type="cancel" data-index="{{index}}" color="red" size="18" class ="del" bindtap="delPic" /></image>

  19.         </block>

  20.             <text class="add" bindtap="bindCamera">{{actionText}}</text>

  21.         </view>

  22.         <view class="action-input">

  23.             <input bindinput="numberChange" name="number" placeholder="车牌号(车牌损坏不用填)" />

  24.             <input bindinput="descChange" name="desc" placeholder="备注" />            

  25.         </view>

  26.         <view class="action-submit">

  27.             <button class="submit-btn" type="default" loading="{{loading}}" bindtap="formSubmit" style="background-color: {{btnBgc}}">提交</button>

  28.         </view>

  29.     </view>

  30. </view>

复制代码


这里用到的组件和指令有:

  • 复选框组件 <checkbox-group>

  • 单个复选框<checkbox>

  • 输入框组件<input>

  • 按钮组件<button>

  • 图标组件<icon>

  • 循环指令:wx:for = "itemValues" wx:key="item" 表示 :

  • 循环一个数组itemValues,数组每一项为item,item是一个对象,具体渲染到模板可能是对象的某个key的value,如:{{item.value}}


组件什么的看看组件文档就知道了呗

页面样式

  1. /* pages/wallet/index.wxss */

  2. .choose{

  3.         background-color: #fff;

  4. }

  5. .choose-grids{

  6.         display: flex;

  7.         flex-wrap: wrap;

  8.         justify-content: space-around;

  9.         padding: 50rpx;

  10. }

  11. .choose-grids .grid{

  12.         width: 45%;

  13.         height: 100rpx;

  14.         margin-top: 36rpx;

  15.         border-radius: 6rpx;

  16.         line-height: 100rpx;

  17.         text-align: center;

  18.         border: 2rpx solid #b9dd08;

  19. }

  20. .choose-grids .grid:first-child,

  21. .choose-grids .grid:nth-of-type(2){

  22.         margin-top: 0;

  23. }

  24. .action .action-photo{

  25.         background-color: #fff;

  26.         padding: 40rpx 0px 40rpx 50rpx;

  27. }

  28. .action .action-photo image{

  29.         position: relative;

  30.         display: inline-block;

  31.         width: 120rpx;

  32.         height: 120rpx;

  33.         overflow: visible;

  34.         margin-left: 25rpx;

  35. }

  36. .action .action-photo image icon.del{

  37.         display: block;

  38.         position: absolute;

  39.         top: -20rpx;

  40.         right: -20rpx;

  41. }

  42. .action .action-photo text.add{

  43.         display: inline-block;

  44.         width: 120rpx;

  45.         height: 120rpx;

  46.         line-height: 120rpx;

  47.         text-align: center;

  48.         font-size: 24rpx;

  49.         color: #ccc;

  50.         border: 2rpx dotted #ccc;

  51.         margin-left: 25rpx;

  52.         vertical-align: top;

  53. }

  54. .action .action-input{

  55.         padding-left: 50rpx;

  56.         margin-top: 30rpx;

  57.         background-color: #fff;

  58. }

  59. .action .action-input input{

  60.         width: 90%;

  61.         padding-top: 40rpx;

  62.         padding-bottom: 40rpx;

  63. }

  64. .action .action-input input:first-child{

  65.         border-bottom: 2rpx solid #ccc;

  66.         padding-bottom: 20rpx;

  67. }

  68. .action .action-input input:last-child{

  69.         padding-top: 20rpx;

  70. }

  71. .action .action-submit{

  72.         padding: 40rpx 40rpx;

  73.         background-color: #f2f2f2;

  74. }

复制代码


页面数据逻辑

  1. // pages/wallet/index.js

  2. Page({

  3.   data:{

  4.     // 故障车周围环境图路径数组

  5.     picUrls: [],

  6.     // 故障车编号和备注

  7.     inputValue: {

  8.       num: 0,

  9.       desc: ""

  10.     },

  11.     // 故障类型数组

  12.     checkboxValue: [],

  13.     // 选取图片提示

  14.     actionText: "拍照/相册",

  15.     // 提交按钮的背景色,未勾选类型时无颜色

  16.     btnBgc: "",

  17.     // 复选框的value,此处预定义,然后循环渲染到页面

  18.     itemsValue: [

  19.       {

  20.         checked: false,

  21.         value: "私锁私用",

  22.         color: "#b9dd08"

  23.       },

  24.       {

  25.         checked: false,

  26.         value: "车牌缺损",

  27.         color: "#b9dd08"

  28.       },

  29.       {

  30.         checked: false,

  31.         value: "轮胎坏了",

  32.         color: "#b9dd08"

  33.       },

  34.       {

  35.         checked: false,

  36.         value: "车锁坏了",

  37.         color: "#b9dd08"

  38.       },

  39.       {

  40.         checked: false,

  41.         value: "违规乱停",

  42.         color: "#b9dd08"

  43.       },

  44.       {

  45.         checked: false,

  46.         value: "密码不对",

  47.         color: "#b9dd08"

  48.       },

  49.       {

  50.         checked: false,

  51.         value: "刹车坏了",

  52.         color: "#b9dd08"

  53.       },

  54.       {

  55.         checked: false,

  56.         value: "其他故障",

  57.         color: "#b9dd08"

  58.       }

  59.     ]

  60.   },

  61. // 页面加载

  62.   onLoad:function(options){

  63.     wx.setNavigationBarTitle({

  64.       title: '报障维修'

  65.     })

  66.   },

  67. // 勾选故障类型,获取类型值存入checkboxValue

  68.   checkboxChange: function(e){

  69.     let _values = e.detail.value;

  70.     if(_values.length == 0){

  71.       this.setData({

  72.         btnBgc: ""

  73.       })

  74.     }else{

  75.       this.setData({

  76.         checkboxValue: _values,

  77.         btnBgc: "#b9dd08"

  78.       })

  79.     }   

  80.   },

  81. // 输入单车编号,存入inputValue

  82.   numberChange: function(e){

  83.     this.setData({

  84.       inputValue: {

  85.         num: e.detail.value,

  86.         desc: this.data.inputValue.desc

  87.       }

  88.     })

  89.   },

  90. // 输入备注,存入inputValue

  91.   descChange: function(e){

  92.     this.setData({

  93.       inputValue: {

  94.         num: this.data.inputValue.num,

  95.         desc: e.detail.value

  96.       }

  97.     })

  98.   },

  99. // 提交到服务器

  100.   formSubmit: function(e){

  101.     // 图片和故障类型必选

  102.     if(this.data.picUrls.length > 0 && this.data.checkboxValue.length> 0){

  103.       wx.request({

  104.         url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',

  105.         data: {

  106.           // 如果是post请求就把这些数据传到服务器,这里用get请求模拟一下假装获得了服务器反馈

  107.           // picUrls: this.data.picUrls,

  108.           // inputValue: this.data.inputValue,

  109.           // checkboxValue: this.data.checkboxValue

  110.         },

  111.         method: 'get', //

  112.         // header: {}, // 设置请求的 header

  113.         success: function(res){

  114.           wx.showToast({

  115.             title: res.data.data.msg,

  116.             icon: 'success',

  117.             duration: 2000

  118.           })

  119.         }

  120.       })

  121.     }else{

  122.       wx.showModal({

  123.         title: "请填写反馈信息",

  124.         content: '看什么看,赶快填反馈信息,削你啊',

  125.         confirmText: "我我我填",

  126.         cancelText: "劳资不填",

  127.         success: (res) => {

  128.           if(res.confirm){

  129.             // 继续填

  130.           }else{

  131.             console.log("back")

  132.             wx.navigateBack({

  133.               delta: 1 // 回退前 delta(默认为1) 页面

  134.             })

  135.           }

  136.         }

  137.       })

  138.     }

  139.    

  140.   },

  141. // 选择故障车周围环境图 拍照或选择相册

  142.   bindCamera: function(){

  143.     wx.chooseImage({

  144.       count: 4,

  145.       sizeType: ['original', 'compressed'],

  146.       sourceType: ['album', 'camera'],

  147.       success: (res) => {

  148.         let tfps = res.tempFilePaths; // 图片本地路径

  149.         let _picUrls = this.data.picUrls;

  150.         for(let item of tfps){

  151.           _picUrls.push(item);

  152.           this.setData({

  153.             picUrls: _picUrls,

  154.             actionText: "+"

  155.           });

  156.         }

  157.       }

  158.     })

  159.   },

  160. // 删除选择的故障车周围环境图

  161.   delPic: function(e){

  162.     let index = e.target.dataset.index;

  163.     let _picUrls = this.data.picUrls;

  164.     _picUrls.splice(index,1);

  165.     this.setData({

  166.       picUrls: _picUrls

  167.     })

  168.   }

  169. })

关于“微信小程序选择器怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI