本文主要内容
- picker 组件的使用
- 自定义组件的创建和使用
- 微信小程序的语法，官方 wxss 库的使用
picker 组件
从底部弹起的滚动选择器
doc: https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
通用属性：
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| mode | string | selector | 否 | 选择器类型 |
| disabled | boolean | false | 否 | 是否禁用 |
| bindcancel | eventhandle | 否 | 取消选择时触发 |
此处省略了 header-text, 仅安卓可用
除了通用属性，对于不同的 mode, picker 拥有不同的属性
此处只列举 mode = selector 时，selector 是默认属性，不需要设置。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| range | array/object array | [] | |
| range-key | string | range 是一个 object array 时， 通过 range-key 来指定 object 中 key 的值作为选择器显示内容 | |
| value | number | 0 | 表示选择了 range 中的第几个（下标从 0 开始) |
| bindchange | eventhandle | value 改变时触发 change 事件，event.detail = {value} |
程序如下
index.js
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
},
bindPickerChange: function (e) {
console.log('picker发送选择改变，携带值为--------', e.detail.value)
this.setData({
index: e.detail.value
})
},
})
index.wxml
<view class="section__title">普通选择器</view>
<!-- value 表示选择了 range 中的第几个（下标从 0 开始）-->
<!-- mode 默认为 selector， 可以不写 -->
<picker mode="selector" bindchange="bindPickerChange" value="{
{index}}" range="{
{array}}">
<view class="picker">
当前选择：{
{array[index]}}
</view>
</picker>
如果用样式
index.wxml
<view class="page">
<view class="section__title">普通选择器</view>
<!-- value 表示选择了 range 中的第几个（下标从 0 开始）-->
<!-- mode 默认为 selector， 可以不写 -->
<picker mode="selector" bindchange="bindPickerChange" value="{
{index}}" range="{
{array}}">
<view class="picker">
当前选择：{
{array[index]}}
</view>
</picker>
</view>
index.wxss
@import "../../lib/weui.wxss";
.picker{
padding: 13px;
background-color: #459aa570;
}
.page {
/* 顶部留白空余的高度 */
padding-top: 30px;
}
UI 库
上面的 weui.wxss 是微信官方提供的 UI 库
用这种格式加到项目里
@import “…/…/lib/weui.wxss”;
自制组件
6.2.3 自定义组件
小程序开发文档
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
新建 comopents 目录，与 page 同级。
./components
└── select
├── select.js
├── select.json
├── select.wxml
└── select.wxss
在使用这个组件的页面，如 index.js 里加上
{
“usingComponents”: {
“select”:“/components/select/select”
}
}
下拉列表组件程序
refer to:
https://blog.csdn.net/l_yilan/article/details/120019884
https://blog.csdn.net/boveysmith/article/details/109544238
因为下拉列表需要多次使用，为了方便使用，需要定义为组件
实现原理
原理就是通过显示或隐藏列表来实现下拉列表
隐藏用 wx:if "{
{show}}"来判断，或通过设置 height 为 0 来实现或者文章来源：https://www.toymoban.com/news/detail-860313.html
问题todo
会有组件覆盖，能看到下面的组件
json文章来源地址https://www.toymoban.com/news/detail-860313.html
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
到了这里，关于微信小程序 —— picker 组件， 下拉列表组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
