微信小程式 選擇器 picker ;demo大全附效果圖
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。
微信小程式開發交流qq群 173683895 、 526474645 ;
正文:
選擇器示例demo:
1.普通選擇器 2.多列選擇器 3.時間選擇器 4.日期選擇器 5.省市區選擇器
原始碼:
wxml
<view class="container"> <!--選擇器--> <view class="section"> <view class="section__title">普通選擇器:(普通陣列)</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 當前選擇:{{array[index]}} </view> </picker> </view> <!--選擇器--> <view class="section"> <view class="section__title">普通選擇器2:(普通json格式陣列)</view> <picker bindchange="bindPickerChange2" value="{{objectIndex}}" range="{{objectArray}}" range-key="name"> <view class="picker"> 當前選擇:{{objectArray[objectIndex].name}} </view> </picker> </view> <!--選擇器--> <view class="section"> <view class="section__title">多列選擇器:</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker"> 當前選擇:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}} </view> </picker> </view> <!--選擇器--> <view class="section"> <view class="section__title">時間選擇器:</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 當前選擇: {{time}} </view> </picker> </view> <!--選擇器--> <view class="section"> <view class="section__title">日期選擇器:</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 當前選擇: {{date}} </view> </picker> </view> <!--選擇器--> <view class="section"> <view class="section__title">省市區選擇器:</view> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"> <view class="picker"> 當前選擇:{{region[0]}},{{region[1]}},{{region[2]}} </view> </picker> </view> <!--end--> </view>
js
Page({ data: { //普通選擇器:(普通陣列) array: ['選項1', '選項2', '選項3', '選項4'], index: 0,//預設顯示位置 //普通選擇器2:(普通json格式陣列) objectArray: [ { id: 0, name: '中國' }, { id: 1, name: '美國' }, { id: 2, name: '德國' }, { id: 3, name: '法國' } ], objectIndex: 0,//預設顯示位置 //多列選擇器: multiArray: [['音訊', '視訊'], ['mp3', '評書']],//二維陣列,長度是多少是幾列 multiIndex: [0, 0], //時間選擇器: time: '12:01', //日期選擇器: date: '2016-09-01', //省市區選擇器: region: ['請選擇', '請選擇', '請選擇'], customItem: '請選擇'//為每一列的頂部新增一個自定義的項 }, //普通選擇器: bindPickerChange: function (e) { console.log('picker傳送選擇改變,攜帶值為', e.detail.value) this.setData({ index: e.detail.value }) }, //普通選擇器2: bindPickerChange2: function (e) { console.log('picker傳送選擇改變,攜帶值為', e.detail.value) this.setData({ objectIndex: e.detail.value }) }, //多列選擇器: bindMultiPickerChange: function (e) { console.log('picker傳送選擇改變,攜帶值為', e.detail.value) this.setData({ multiIndex: e.detail.value }) }, bindMultiPickerColumnChange: function (e) { console.log('修改的列為', e.detail.column, ',值為', e.detail.value); if (e.detail.column==0){//第1列 if (e.detail.value == 0) {//音訊 this.setData({ multiArray: [['音訊', '視訊'], ['mp3', '評書']] }) }; if (e.detail.value == 1) {//視訊 this.setData({ multiArray: [['音訊', '視訊'], ['電影', '電視劇']] }) }; }; }, //時間選擇器: bindTimeChange: function (e) { console.log('picker傳送選擇改變,攜帶值為', e.detail.value) this.setData({ time: e.detail.value }) }, //日期選擇器: bindDateChange: function (e) { console.log('picker傳送選擇改變,攜帶值為', e.detail.value) this.setData({ date: e.detail.value }) }, //省市區選擇器: bindRegionChange: function (e) { console.log('picker傳送選擇改變,攜帶值為', e.detail.value) this.setData({ region: e.detail.value }) } })
css
/*選擇器 */
.section__title{
margin-bottom: 20rpx;
}
.section{
margin: 50rpx 0;
font-size: 30rpx;
}
效果圖:
1
2
3
4
5
獲取多項選擇器的值:
<!--選擇器--> <view class="section"> <view class="section__title">多列選擇器:</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker"> 當前選擇:{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}} </view> </picker> </view> Page({ data:{ //多列選擇器: multiArray: [['音訊', '視訊'], ['mp3', '評書']],//二維陣列,長度是多少是幾列 multiIndex: [0, 0], }, //多列選擇器: bindMultiPickerChange: function (e) { this.setData({ multiIndex: e.detail.value }) console.log('1為:', this.data.multiArray[0][e.detail.value[0]]) console.log('2為:', this.data.multiArray[1][e.detail.value[1]]) }, })
相關推薦
微信小程式 選擇器 picker ;demo大全附效果圖
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群 173683895 、 526474645 ; 正文: 選擇器示例demo: 1.普通選擇器 2.多列選擇器 3.時間選擇器 4.日期選擇器 5.省市區選擇器 原始碼:
微信小程式-選擇器
支援選擇器有 .class => class=“class” 的元件 #id => id="id" 的元件 element =》 所有view元件 element,element => element
微信小程式 跑馬燈效果完整程式碼附效果圖
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群 173683895 、 526474645 ; 正文: 一:功能介紹及講解 實現的跑馬燈(跑馬燈裡面顯示文章的title)的效果,並在右側有個檢視文章的按鈕,按鈕綁定當前的跑馬燈
微信小程式發紅包功能實現,附效果圖加講解。
有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群 173683895 、 526474645 ; 正文: 目前此功能尚在內測,無法申請。此博文僅示例。 流
微信小程式例子——使用picker實現時間和日期選擇框
1、效果展示 2、關鍵程式碼 index.wxml 當前城市選擇:{{picker1Range[picker1Value]}} 當前時間選擇: {{timeValue}} 當前日期選擇: {{dateValue}} index.js Page(
微信小程式 藍芽開發 Demo 外掛
微信小程式藍芽操作 由於開發要求,要在微信小程式加上藍芽操作,於是乎就自己寫了個封裝了個藍芽外掛bletool,方便自己以後使用,下面介紹一下使用方法和反饋引數 先來看初始化 整合之後藍芽的操作就變得簡單很多了,先把寫好的bletool.js放到utils包下(具體放哪看你們自己的了
微信小程式+SpringBoot+Mybatis登入demo(一、小程式端)
現在微信小程式越來越火了,相信不少人都通過各種途徑學習過微信小程式或者嘗試開發,我也是因為新鮮感學習了一下,寫了一個登入demo 前言: 微信小程式開發者註冊API等亂起八糟的東西我這裡就不寫了,是SpringBoot框架不會搭建的可以看我上一篇文章
微信小程式入門教程+案例demo
尊重原創,轉載請註明出處:原文檢視驚喜更多 http://blog.csdn.net/qq137722697 首先擺在好姿態,——微信小程式開發也就那麼回事。你只需要一點點css(真的只要一點點)的基礎就可以了。 認清微信小程式開發 其實,我覺得小程式就是將微信官方提供
微信小程式選擇圖片和預覽圖片
作者>:燕瀟灑 視訊中,老師也是看著官方文件,為學生們講解,微信提供了系統的方法來選擇圖片. wx.chooseImage({}) 此方法是用來選擇圖片的方法,具體使用如下: data: { avatarUrl:null
微信小程式熱點雲筆記demo 開源總結
因為公司的專案需要,我們自己開發了一個微信小程式的雲筆記 雲筆記功能特點: (1)自動微信登入 (2)筆記能儲存在雲端,更換手機,清空快取後,筆記還在 藉助於微信登入,我們不需要使用者的賬號,也能識別使用者的唯一性 (4)資料儲存使用的是免費的
通過QQ音樂介面,做的一個簡易微信小程式播放器
剛接觸微信小程式開發,自己閒來無事做的一個音樂播放器。大概介紹一下其中使用的哪些東西。由於QQ音樂要求請求頭中必須包含Referer這個設定(Referer:代表你是從哪個頁面傳送的請求)才能正確的響應資料,然而微信小程式的網路請求wx.request規定不能在
微信小程式編輯器,支援wxss,支援wxml
寫小程式的時候,企鵝把結構表現層(html)的字尾名定義為wxml,把樣式層定義為wxss 然後寫起程式碼來就是這樣子。。 說好的標紅,高亮,自動提示,自動縮排呢?這怎麼寫,, 是的,目前還沒有支援wxml,wxss的編輯器,, 那就先寫html,css字尾吧,,最終
微信小程式-選擇視訊檔案及儲存到本地
bindButtonTap: function () { var that = this wx.chooseVideo({ sourceType: ['album', 'camera'], maxDuration: 60,
微信小程式之下拉列表實現(附完整原始碼)
目錄 一、效果圖 二、實現原理 三、原始碼 四、專案下載 同類文章推薦: 更多幹貨關注公眾號: 一、效果圖 二、實現原理 跟網頁的下拉列表實現是一樣的,剛剛開始預設下拉的內容的是不顯示的(display:none),然後通過點選的時
微信小程式上傳圖片功能(附後端程式碼)
幾乎每個程式都需要用到圖片,在小程式中我們可以通過image元件顯示圖片。 當然小程式也是可以上傳圖片的,微信小程式文件也寫的很清楚。 上傳圖片 首先選擇圖片 通過wx.chooseImage(OBJECT)實現 官方示例程式碼 ? 1 2
微信小程式 java服務端記(附部署過程)
1、檔案上傳,使用springmvc一直不行,後來看到別人有一樣的情況改成了serverlet就可以了2、因為要進行語音識別成文字,上傳的語音檔案是silk格式,需要用到訊飛的語音識別所以必須轉成wav,用到了kn007大神的這個工具https://github.com/kn
修改微信小程式官方picker-view日期選擇器
專案需求截圖,選擇出生日期的時候需要用到微信的picker-view日期選擇器 然後就發現官方picker-view元件有一些問題: 1、初始化日期不是當前日期 2、選擇不同月份,日期都是從1-31號(其實不同月份 天數不同) 3、專案要求所選日期不能
微信小程式 picker-view日期選擇器(二)
上一篇講的是微信小程式裡面,時間控制元件最大選擇日期為當前日期,這篇寫不限制最大選擇日期。 wxml的程式碼部分還是一樣的,只是js稍微改動了一下,並且這個可以實現月份和日期小雨10的時候,前面加0的效果。 給出效果圖: 貼出程式碼: js: const da
微信小程式、mpvue小程式 picker-view日期選擇器的使用
因為小程式自帶的picker日期選擇器樣式等不能夠自定義,所以我使用了picker-view,可以自定義樣式。本示例是使用mpvue開發的微信小程式,適用於 微信小程式(自己稍微改下樣式和邏輯)、mpvue、vue開發的專案。也因為 picker-view 原來的示例中每個月返回的都是31天,不夠準
微信小程式weui線上入門教程-WeUi操作反饋-picker選擇器
單列選擇器 時間選擇器 日期選擇器 js程式碼 data: { array: ['美國', '中國', '巴西', '日本'], index: 0, date: '2016-09-01', time: '12:01'