微信小程序選擇器怎么用

發布時間：2022-03-10 14:39:22 來源：億速云閱讀：225 作者：iii 欄目：開發技術

這篇文章主要介紹“微信小程序選擇器怎么用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序選擇器怎么用”文章能幫助大家解決問題。

頁面結構

<view class="container">
<view class="choose">
<view class="title">請選擇故障類型</view>
<checkbox-group bindchange="checkboxChange" class="choose-grids">
<block wx:for="{{itemsValue}}" wx:key="{{item}}">
<view class="grid">
<checkbox value="{{item.value}}" checked="{{item.checked}}" color="{{item.color}}" />{{item.value}}
</view>
</block>
</checkbox-group>
</view>
<view class="action">
<view class="title">拍攝單車周圍環境，便于維修師傅找車</view>
<view class="action-photo">
<block wx:for="{{picUrls}}" wx:key="{{item}}" wx:index="{{index}}">
<image src="{{item}}"><icon type="cancel" data-index="{{index}}" color="red" size="18" class ="del" bindtap="delPic" /></image>
</block>
<text class="add" bindtap="bindCamera">{{actionText}}</text>
</view>
<view class="action-input">
<input bindinput="numberChange" name="number" placeholder="車牌號（車牌損壞不用填）" />
<input bindinput="descChange" name="desc" placeholder="備注" />
</view>
<view class="action-submit">
<button class="submit-btn" type="default" loading="{{loading}}" bindtap="formSubmit" style="background-color: {{btnBgc}}">提交</button>
</view>
</view>
</view>

復制代碼

這里用到的組件和指令有：

復選框組件 <checkbox-group>
單個復選框<checkbox>
輸入框組件<input>
按鈕組件<button>
圖標組件<icon>
循環指令：wx:for = "itemValues" wx:key="item" 表示：
循環一個數組itemValues，數組每一項為item，item是一個對象，具體渲染到模板可能是對象的某個key的value，如：{{item.value}}

組件什么的看看組件文檔就知道了唄

頁面樣式

/* pages/wallet/index.wxss */
.choose{
background-color: #fff;
}
.choose-grids{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 50rpx;
}
.choose-grids .grid{
width: 45%;
height: 100rpx;
margin-top: 36rpx;
border-radius: 6rpx;
line-height: 100rpx;
text-align: center;
border: 2rpx solid #b9dd08;
}
.choose-grids .grid:first-child,
.choose-grids .grid:nth-of-type(2){
margin-top: 0;
}
.action .action-photo{
background-color: #fff;
padding: 40rpx 0px 40rpx 50rpx;
}
.action .action-photo image{
position: relative;
display: inline-block;
width: 120rpx;
height: 120rpx;
overflow: visible;
margin-left: 25rpx;
}
.action .action-photo image icon.del{
display: block;
position: absolute;
top: -20rpx;
right: -20rpx;
}
.action .action-photo text.add{
display: inline-block;
width: 120rpx;
height: 120rpx;
line-height: 120rpx;
text-align: center;
font-size: 24rpx;
color: #ccc;
border: 2rpx dotted #ccc;
margin-left: 25rpx;
vertical-align: top;
}
.action .action-input{
padding-left: 50rpx;
margin-top: 30rpx;
background-color: #fff;
}
.action .action-input input{
width: 90%;
padding-top: 40rpx;
padding-bottom: 40rpx;
}
.action .action-input input:first-child{
border-bottom: 2rpx solid #ccc;
padding-bottom: 20rpx;
}
.action .action-input input:last-child{
padding-top: 20rpx;
}
.action .action-submit{
padding: 40rpx 40rpx;
background-color: #f2f2f2;
}

復制代碼

頁面數據邏輯

// pages/wallet/index.js
Page({
data:{
// 故障車周圍環境圖路徑數組
picUrls: [],
// 故障車編號和備注
inputValue: {
num: 0,
desc: ""
},
// 故障類型數組
checkboxValue: [],
// 選取圖片提示
actionText: "拍照/相冊",
// 提交按鈕的背景色，未勾選類型時無顏色
btnBgc: "",
// 復選框的value，此處預定義，然后循環渲染到頁面
itemsValue: [
{
checked: false,
value: "私鎖私用",
color: "#b9dd08"
},
{
checked: false,
value: "車牌缺損",
color: "#b9dd08"
},
{
checked: false,
value: "輪胎壞了",
color: "#b9dd08"
},
{
checked: false,
value: "車鎖壞了",
color: "#b9dd08"
},
{
checked: false,
value: "違規亂停",
color: "#b9dd08"
},
{
checked: false,
value: "密碼不對",
color: "#b9dd08"
},
{
checked: false,
value: "剎車壞了",
color: "#b9dd08"
},
{
checked: false,
value: "其他故障",
color: "#b9dd08"
}
]
},
// 頁面加載
onLoad:function(options){
wx.setNavigationBarTitle({
title: '報障維修'
})
},
// 勾選故障類型，獲取類型值存入checkboxValue
checkboxChange: function(e){
let _values = e.detail.value;
if(_values.length == 0){
this.setData({
btnBgc: ""
})
}else{
this.setData({
checkboxValue: _values,
btnBgc: "#b9dd08"
})
}
},
// 輸入單車編號，存入inputValue
numberChange: function(e){
this.setData({
inputValue: {
num: e.detail.value,
desc: this.data.inputValue.desc
}
})
},
// 輸入備注，存入inputValue
descChange: function(e){
this.setData({
inputValue: {
num: this.data.inputValue.num,
desc: e.detail.value
}
})
},
// 提交到服務器
formSubmit: function(e){
// 圖片和故障類型必選
if(this.data.picUrls.length > 0 && this.data.checkboxValue.length> 0){
wx.request({
url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',
data: {
// 如果是post請求就把這些數據傳到服務器，這里用get請求模擬一下假裝獲得了服務器反饋
// picUrls: this.data.picUrls,
// inputValue: this.data.inputValue,
// checkboxValue: this.data.checkboxValue
},
method: 'get', //
// header: {}, // 設置請求的 header
success: function(res){
wx.showToast({
title: res.data.data.msg,
icon: 'success',
duration: 2000
})
}
})
}else{
wx.showModal({
title: "請填寫反饋信息",
content: '看什么看，趕快填反饋信息，削你啊',
confirmText: "我我我填",
cancelText: "勞資不填",
success: (res) => {
if(res.confirm){
// 繼續填
}else{
console.log("back")
wx.navigateBack({
delta: 1 // 回退前 delta(默認為1) 頁面
})
}
}
})
}
},
// 選擇故障車周圍環境圖拍照或選擇相冊
bindCamera: function(){
wx.chooseImage({
count: 4,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
let tfps = res.tempFilePaths; // 圖片本地路徑
let _picUrls = this.data.picUrls;
for(let item of tfps){
_picUrls.push(item);
this.setData({
picUrls: _picUrls,
actionText: "+"
});
}
}
})
},
// 刪除選擇的故障車周圍環境圖
delPic: function(e){
let index = e.target.dataset.index;
let _picUrls = this.data.picUrls;
_picUrls.splice(index,1);
this.setData({
picUrls: _picUrls
})
}
})

關于“微信小程序選擇器怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細節

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

微信小程序選擇器怎么用

猜你喜歡

中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

微信小程序選擇器怎么用

猜你喜歡

最新資訊

相關推薦

相關標簽