微信小程序选择器怎么用

复制代码

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

• 复选框组件

• 单个复选框

• 输入框组件

• 按钮组件

• 图标组件

• 循环指令：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. bindCamera: function(){

142. wx.chooseImage({

143. count: 4,

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

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

146. success: (res) => {

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

148. let _picUrls = this.data.picUrls;

149. for(let item of tfps){

150. _picUrls.push(item);

151. this.setData({

152. picUrls: _picUrls,

153. actionText: "+"

154. });

155. }

156. }

157. })

158. },

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

160. delPic: function(e){

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

162. let _picUrls = this.data.picUrls;

163. _picUrls.splice(index,1);

164. this.setData({

165. picUrls: _picUrls

166. })

167. }

168. })

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