一、原始碼位址
二、效果圖
三、元件原始碼
1. select.wxml
<說明：用 catchtap 而不用 bindtap 是為了阻止事件冒泡，為了實現點選頁面其他地方關閉 select， 所以在父頁面（index.wxml）最外層繫結了 bindtap="close" 方法， 不阻止冒泡的話會執行父元件的 close 方法view
class
="select-box"
>
<
view
class
="select-current"
catchtap
="openclose"
>
<
text
class
="current-name"
>}
text
>
view
>
<
view
class
="option-list"
wx:if
="}"
catchtap
="optiontap"
>
<
text
class
="option"
data-id
="}"
data-name
="}"
>
}
text
>
<
text
class
="option"
wx:for
="}"
wx:key
="}"
data-id
="}"
data-name
="}"
>
}
text
>
view
>
view
>
2. select.js
component(,說明：properties中的 key 和 text 是為了做屬性名轉換。比如我現在的資料結構如下：defaultoption:
},key: ,
text:
},data:
},methods: );
//呼叫父元件方法，並傳參
this.triggerevent("change", )
},openclose() )
},//此方法供父元件呼叫
close() )}},
lifetimes: 格式，則轉為 格式
let result =
if (this.data.key !== 'id' || this.data.text !== 'name') =item
result.push()}}
this
.setdata(,
this
.data.defaultoption),
result: result})}
}})
[, , ]而 select 元件要求的資料結構是：
[, , ]因此我們就要將 city_id 轉換成 id，city_name 轉換成 name。 怎麼實現屬性名轉換呢？ 就是通過 key 和 text 這兩個引數。
3. select.json
}4. select.wxss
.select-box .select-current .select-current::after .current-name .option-list .option .option:last-child四、元件的使用index.wxml
小程式下拉框
右鍵這個資料夾，新建下面的這個component。然後輸入需要建立的名稱，我這裡為了方便就取了select的名字。然後就會自動建立4個檔案，js json wxml wxss。元件樣式 元件的wxml class com selectbox class com scontent bindtap se...
下拉框處理（select）
在ui自動化測試過程中，經常會遇到一些下拉框，我們有三種可選方式來操作下拉框。第一種方法 基於webdriver的兩次click，很容易出現問題，不建議使用。由於部分下拉框在點選一次後，失去焦點再點下一次時可能下拉框中的引數就消失了，那麼就無法進行選擇了，所以會出現無法定位到目標元素或目標元素不可見...
select下拉框預設選擇
select標籤構成的下拉框和jquery通過js構建的下拉框用法一樣。例如 html下拉框 啟用 停用 js控制的下拉框 editdisplayname combobox 兩者的本質是相同的，但是，select標籤建立的下拉框會預設選中第乙個選項。而js控制的下拉框預設是不會選中任何選項的。當然s...