新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)百度小程序教程:picker-view 滾動選擇器
- picker-view 滾動選擇器
- 屬性說明
- 示例
- 代碼示例
- Bug & Tip
picker-view 滾動選擇器
解釋:可嵌頁面的滾動選擇器。

站在用戶的角度思考問題,與客戶深入溝通,找到融水網(wǎng)站設計與融水網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗,讓設計與互聯(lián)網(wǎng)技術結合,創(chuàng)造個性化、用戶體驗好的作品,建站類型包括:成都做網(wǎng)站、網(wǎng)站建設、外貿(mào)營銷網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、主機域名、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋融水地區(qū)。
屬性說明
| 屬性名 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| value | Array | [] | 否 | 數(shù)組中的數(shù)字依次表示 picker-view 內(nèi)的 picker-view-colume 選擇的第幾項(下標從 0 開始),數(shù)字大于 picker-view-column 可選項長度時,選擇最后一項 |
| indicator-style | String | 否 | 設置選擇器中間選中框的樣式 | |
| indicator-class | String | 否 | 設置選擇器中間選中框的類名 | |
| mask-style | String | 否 | 設置蒙層的樣式 | |
| mask-class | String | 否 | 設置蒙層的類名 | |
| title | String | 否 | 選擇器標題,建議標題控制在 12 個中文漢字長度內(nèi),避免出現(xiàn)截斷現(xiàn)象, 截斷部分將以 … 形式展示 | |
| bindchange | EventHandle | 否 | 當滾動選擇,value 改變時觸發(fā) change 事件,event.detail = {value: value};value 為數(shù)組,表示 picker-view 內(nèi)的 picker-view-column 當前選擇的是第幾項(下標從 0 開始) |
示例
跳轉編輯工具
在開發(fā)者工具中打開
在 WEB IDE 中打開
掃碼體驗
代碼示例
請使用百度APP掃碼
代碼示例
- SWAN
- JS
{{year}}年{{month}}月{{day}}日 indicator-style ="color: #74fa7d"mask-class="maskStyle"style="width: 100%;height: 300px;"value="{{value}}"title="選擇器標題"bindchange="bindChange">{{item}}年 {{item}}月 {{item}}日
const date = new Date()const years = []const months = []const days = []for (let i = 1990; i <= date.getFullYear(); i++) {years.push(i)}for (let i = 1; i <= 12; i++) {months.push(i)}for (let i = 1; i <= 31; i++) {days.push(i)}let app = getApp();Page({data: {years,year: date.getFullYear(),months,month: 2,days,day: 2,value: [9999, 1, 1]},bindChange(e) {const val = e.detail.valuethis.setData({year: this.data.years[val[0]],month: this.data.months[val[1]],day: this.data.days[val[2]]})}});
Bug & Tip
- Tip:其中只可放置 picker-view-column 組件,其他節(jié)點不會顯示。
文章題目:創(chuàng)新互聯(lián)百度小程序教程:picker-view 滾動選擇器
文章出自:http://www.5511xx.com/article/coedggp.html


咨詢
建站咨詢
