微信小程序选择器怎么用

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

页面结构

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

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

页面样式

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. })

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