小程序模板網(wǎng)

微信小程序學習點滴《十一》：選擇器 時間選擇器 日期選擇器 地區(qū)選擇器 .

發(fā)布時間：2018-03-29 18:35 所屬欄目：小程序開發(fā)教程

用微信封裝好的控件感覺很好,為我們開發(fā)人員省去了很多麻煩.弊端就是不能做大量的自定義.今天試用了選擇器.

上gif:

上代碼:

1.index.js



    
	
  1. 
		//index.js
    2. 
	
  2. 
		//獲取應用實例
    3. 
	
  3. 
		var app = getApp()
    4. 
	
  4. 
		Page({
    5. 
	
  5. 
		data: {
    6. 
	
  6. 
		date: '2016-11-08',
    7. 
	
  7. 
		time: '12:00',
    8. 
	
  8. 
		array: ['中國', '巴西', '日本', '美國'],
    9. 
	
  9. 
		index: 0,
    10. 
	
  10. 
		},
    11. 
	
  11. 
		 
    12. 
	
  12. 
		onLoad: function () {
    13. 
	
  13. 
		 
    14. 
	
  14. 
		},
    15. 
	
  15. 
		// 點擊時間組件確定事件
    16. 
	
  16. 
		bindTimeChange: function (e) {
    17. 
	
  17. 
		this.setData({
    18. 
	
  18. 
		time: e.detail.value
    19. 
	
  19. 
		})
    20. 
	
  20. 
		},
    21. 
	
  21. 
		// 點擊日期組件確定事件
    22. 
	
  22. 
		bindDateChange: function (e) {
    23. 
	
  23. 
		this.setData({
    24. 
	
  24. 
		date: e.detail.value
    25. 
	
  25. 
		})
    26. 
	
  26. 
		},
    27. 
	
  27. 
		// 點擊國家組件確定事件
    28. 
	
  28. 
		bindPickerChange: function (e) {
    29. 
	
  29. 
		this.setData({
    30. 
	
  30. 
		index: e.detail.value
    31. 
	
  31. 
		})
    32. 
	
  32. 
		}
    33. 
	
  33. 
		})
    34. 


2.index.wxml



    
	
  1. 
		<!--index.wxml-->
    2. 
	
  2. 
		<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
    3. 
	
  3. 
		<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    4. 
	
  4. 
		<view class="picker">
    5. 
	
  5. 
		國家：{{array[index]}}
    6. 
	
  6. 
		</view>
    7. 
	
  7. 
		</picker>
    8. 
	
  8. 
		</view>
    9. 
	
  9. 
		 
    10. 
	
  10. 
		<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
    11. 
	
  11. 
		<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    12. 
	
  12. 
		<view class="picker">
    13. 
	
  13. 
		時間 : {{time}}
    14. 
	
  14. 
		</view>
    15. 
	
  15. 
		</picker>
    16. 
	
  16. 
		</view>
    17. 
	
  17. 
		<view class="section" style="background:#787878;margin:20rpx;padding:20rpx">
    18. 
	
  18. 
		<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    19. 
	
  19. 
		<view class="picker">
    20. 
	
  20. 
		日期: {{date}}
    21. 
	
  21. 
		</view>
    22. 
	
  22. 
		</picker>
    23. 
	
  23. 
		</view>
    24. 


①普通選擇器


	選擇器用mode來區(qū)別,默認是普通選擇器,e.detail.value拿到的值是選擇了項的索引index,再通過array拿到值.在data里面做初始化的時候,將備選項加入array即可.



	選擇時觸發(fā)bindPickerChange事件,獲取index.



	 



	②時間選擇器



	mode = time時,是時間選擇器.start,end分別是有效時間范圍的開始和結束.格式hh:mm



	選擇時觸發(fā)bindTimeChange事件,獲取time.



	 



	③日期選擇器



	 



	mode = date時,是時間選擇器.start,end分別是有效日期范圍的開始和結束.格式y(tǒng)yyy-MM-dd



	選擇時觸發(fā)bindDateChange事件,獲取date

            


            


            

            

                
                

                    本文地址：http://www.u-renovate.com/wxmini/doc/course/22966.html 復制鏈接 
                    如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點擊咨詢 
                

            

          

          

        

      

      
    

  







  

    
  









  
  

    
    
    

    

     QQ在線咨詢 
    

      
    

    
  






 



    

        AI智能客服
        ×