マイクロチャネルプルダウンフレーム単位は、選択機能をアプレット
更新：2019年9月9日午前8時21分23秒投稿者：似た コメントへの
この記事では、ドロップダウンボックスコンポーネントの機能を選択し、我々はサンプルコードで非常に詳細にご紹介アプレットマイクロチャネルに焦点を当てて、参照のための特定の値を持っている、あなたが困っている友達を参照することができます
まず、送信元アドレス
https://github.com/imxiaoer/WeChatMiniSelect
第二に、図の効果。
悪い記録画面の画質、我々はぼかしが表示されますので、（Wulian）
第三に、ソースのコンポーネント
1. select.wxml
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<view class="select-box">
<view class="select-current" catchtap="openClose">
<text class="current-name">{{current.name}}</text>
</view>
<view class="option-list" wx:if="{{isShow}}" catchtap="optionTap">
<text class="option"
data-id="{{defaultOption.id}}"
data-name="{{defaultOption.name}}">{{defaultOption.name}}
</text>
<text class="option"
wx:for="{{result}}"
wx:key="{{item.id}}"
data-id="{{item.id}}"
data-name="{{item.name}}">{{item.name}}
</text>
</view>
</view>
|
説明：bindtapなしcatchtapは、ページの残りの部分を達成するために、バブリングからイベントを防ぐ選択[閉じる]をクリックすることで、バインドされた最も外側の親ページ（index.wxmlが）ので bindtap="close" 、バブリング停止しない方法、そして親コンポーネントを行い、 closeメソッド
2. select.js
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
Component({
properties: {
options: {
type: Array,
value: []
},
defaultOption: {
type: Object,
value: {
id: '000',
name: '全部城市'
}
},
key: {
type: String,
value: 'id'
},
text: {
type: String,
value: 'name'
}
},
data: {
result: [],
isShow: false,
current: {}
},
methods: {
optionTap(e) {
let dataset = e.target.dataset
this.setData({
current: dataset,
isShow: false
});
// 调用父组件方法，并传参
this.triggerEvent("change", { ...dataset })
},
openClose() {
this.setData({
isShow: !this.data.isShow
})
},
// 此方法供父组件调用
close() {
this.setData({
isShow: false
})
}
},
lifetimes: {
attached() {
// 属性名称转换, 如果不是 { id: '', name:'' } 格式，则转为 { id: '', name:'' } 格式
let result = []
if (this.data.key !== 'id' || this.data.text !== 'name') {
for (let item of this.data.options) {
let { [this.data.key]: id, [this.data.text]: name } = item
result.push({ id, name })
}
}
this.setData({
current: Object.assign({}, this.data.defaultOption),
result: result
})
}
}
})
|
説明：キーとテキストのプロパティは、変換属性名を作成します。たとえば、次のように私は今のデータが構成されています。
| 1 2 3 4 5 6 7 8 9 10 |
[{
city_id: '001',
city_name: '北京'
}, {
city_id: '002',
city_name: '上海'
}, {
city_id: '003',
city_name: '深圳'
}]
|
データ構造が必要とされているコンポーネントを選択します。
| 1 2 3 4 5 6 7 8 9 10 |
[{
id: '001',
name: '北京'
}, {
id: '002',
name: '上海'
}, {
id: '003',
name: '深圳'
}]
|
我々はCITY_IDがIDに変換しようとしているので、CITY_NAMEは名前に変換します。変換属性名にそれを達成するためにどのように？これは、これら2つのパラメータのキーとテキストを介して行われます。
3. select.json
| 1 2 3 4 |
{
"component": true,
"usingComponents": {}
}
|
4. select.wxss
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
.select-box {
position: relative;
width: 100%;
font-size: 30rpx;
}
.select-current {
position: relative;
width: 100%;
padding: 0 10rpx;
line-height: 70rpx;
border: 1rpx solid #ddd;
border-radius: 6rpx;
box-sizing: border-box;
}
.select-current::after {
position: absolute;
display: block;
right: 16rpx;
top: 30rpx;
content: '';
width: 0;
height: 0;
border: 10rpx solid transparent;
border-top: 10rpx solid #999;
}
.current-name {
display: block;
width: 85%;
height: 100%;
word-wrap: normal;
overflow: hidden;
}
.option-list {
position: absolute;
left: 0;
top: 76rpx;
width: 100%;
padding: 12rpx 20rpx 10rpx 20rpx;
border-radius: 6rpx;
box-sizing: border-box;
z-index: 99;
box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;
background-color: #fff;
}
.option {
display: block;
width: 100%;
line-height: 70rpx;
border-bottom: 1rpx solid #eee;
}
.option:last-child {
border-bottom: none;
padding-bottom: 0;
}
|
第四に、コンポーネントの使用
index.wxml
| 1 2 3 4 5 |
<view class="container" bindtap="close">
<view class="select-wrap">
<select id="select" options="{{options}}" key="city_id" text="city_name" bind:change="change"></select>
</view>
</view>
|
概要
以上所述是小编给大家介绍的微信小程序 select 下拉框组件功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章:
