无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

推薦新聞
小程序開發(fā)之彈出框
發(fā)布者：深藍(lán)互聯(lián)
發(fā)布時間：2019-12-09
點擊：次
小程序開發(fā)過程中，很多地方為了便利我們多采用小程序自帶彈出框來實現(xiàn)交互效果。這也夠大多數(shù)開發(fā)使用，下面我給大家詳細(xì)介紹下小程序彈出框
官方api傳送門：https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html?search-key=wx.show
  • wx.showToast()
    • title：顯示的提示信息，在沒有圖標(biāo)的情況下，文本內(nèi)容可顯示兩行
    • icon:  顯示的圖標(biāo)
      • success：成功圖標(biāo)
      • loading：加載圖標(biāo)
      • none：沒有圖標(biāo)
    • image：自定義顯示的圖標(biāo)，優(yōu)先級高于icon
    • duration：延遲的時間，彈出框彈出后的顯示時間
    • mask：true/false是否顯示遮罩層
    • success：接口調(diào)用成功的回調(diào)函數(shù)
    • fail：接口調(diào)用失敗的回調(diào)函數(shù)
    • complete：不管成功還是失敗都會執(zhí)行的函數(shù)
注：一般在點擊事件中調(diào)用，可結(jié)合使用wx.hideTotast來使用，

  • wx.showLoading()
    • title：加載的提示信息eg：玩命加載中...
    • mask：是否現(xiàn)思遮罩層
    • success：接口調(diào)用成功的回調(diào)函數(shù)
    • fail：接口調(diào)用失敗的回調(diào)函數(shù)
    • complete：無論成功還是失敗都會執(zhí)行的函數(shù)
注：一般需要結(jié)合使用wx.hideLoading()；來使用可分別在onLoad和onReady中使用，數(shù)據(jù)渲染完成后關(guān)閉

  • wx.showModal()
    • title：提示信息的標(biāo)題
    • content：提示信息的內(nèi)容
    • showCancel：true/false是否顯示取消按鈕
    • cancelText：取消按鈕的文本內(nèi)容，不得超過四個字符
    • cancelColor：取消按鈕的文本顏色，默認(rèn)#000000
    • confirmText：確認(rèn)按鈕的文本內(nèi)容，不得超過四個字符
    • confirmColor：卻惹按鈕的文本顏色，默認(rèn)#000000
    • success：接口成功的回調(diào)
    • fail：接口失敗的回調(diào)
  • complete：無論成功或失敗都會嗲用
注：一般帶年紀(jì)確認(rèn)或取消，我們需要在success中進行事件的判斷處理
1
2
3
4
5
6
7
8
9
10
11		 wx.showModal({
title: '提示',
content: '這是一個模態(tài)彈窗',
success: function(res) {
if (res.confirm) {
console.log('用戶點擊確定')
} else if (res.cancel) {
console.log('用戶點擊取消')
}
}
})

　　


  • wx.showActionSheet()
    • itemList: 底部彈出的信息元素為數(shù)組。
    • success：成功的回調(diào)
    • fail：失敗的回調(diào)
1
2
3
4
5
6
7
8
9		 wx.showActionSheet({
    itemList: ['A', 'B', 'C'],
    success: function(res) {
        console.log(res.tapIndex)
    },
    fail: function(res) {
        console.log(res.errMsg)
    }
})

　　


注：bug是當(dāng)數(shù)組中的元素較多時，彈出框的高度會很高，且不能上下滑動，因此，大家可以看我總結(jié)的小程序開發(fā)之組件的簡單使用，這篇中我有總結(jié)彈出框組件的封裝。


這里的話需要用到小程序自帶的picker組件，picker一共分為三類
  • 普通選擇器：mode = selector
    • range：下拉列表的數(shù)據(jù)，為一個obj或array。只有當(dāng)mode=selector或者 mode= multiSelector時有效。
    • range-key：當(dāng)range為對象時，range-key用來指定顯示對象的哪一個屬性上的屬性值
    • value：下拉項的下標(biāo)，可通過改變該屬性來實現(xiàn)確定后數(shù)據(jù)的對應(yīng)渲染。
    • bindchange：value改變時觸發(fā)
    • bindcancel：取消或者點擊遮罩層的時候觸發(fā)
    • disabled：true/false是否禁用
1
2
3
4
5		 <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
    當(dāng)前選擇：{{array[index]}}
    </view>
</picker>

　　


 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		 Page({
    /**
    *array：普通選擇器下拉的數(shù)據(jù)
    *index：默認(rèn)顯示的時下標(biāo)為0的數(shù)據(jù)
    */
    data: {
            array: ['美國', '中國', '巴西', '日本'],
            index: 0,
    }，
        bindPickerChange: function (e) {
            console.log('picker下拉項發(fā)生變化后，下標(biāo)為：', e.detail.value)
            this.setData({
                index: e.detail.value
            })
        },
})

　　


 
  • 多列選擇器：mode = multiSelector
    • range：下拉列表的數(shù)據(jù)，通過二位三位數(shù)組來表示對應(yīng)列的數(shù)據(jù)。只有當(dāng)mode=selector或者 mode= multiSelector時有效。
    • range-key： 當(dāng) range是一個 二維Object Array 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內(nèi)容
    • value：是一個數(shù)組，依次對應(yīng)每一列的下標(biāo)。從0開始
    • bindchange：點擊確定后觸發(fā)的事件，返回當(dāng)前的所有列的行元素所在的下標(biāo)
    • bindcolumnchange：value改變時觸發(fā)，返回的值為第幾列第幾行下標(biāo)發(fā)生變化。
    • bindcancel：取消選擇或點擊遮罩層時觸發(fā)
1
2
3
4
5
6
7
8		 <view class="section">
    <view class="section__title">多列選擇器</view>
    <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}">
        <view class="picker">
當(dāng)前選擇：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}
        </view>
    </picker>
</view>

　　


  

	
		

			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
69
70
71
72
73
74
75
76
77
78
79		
			Page({
    /**
    *multiArray：多列選擇的二位數(shù)組
    *multiIndex：默認(rèn)顯示的每列的下標(biāo)
   &nb               

 


      
      
    
    
  
  
 

    

      
    
        
  • 
          
    
            
            聯(lián)系地址
          
    
          中國 深圳 龍華區(qū)龍觀西路99號順泰中晟大廈一棟14樓13A01
        
    • 
        
  • 
          
    
            
            聯(lián)系電話
          
    
          電話：13530005652 / 0755-23110995
        
    • 
        
  • 
          
    
            
            電子郵箱
          
    
          wisepu@szdbi.com
        
    • 
      

      

        

          

            
            關(guān)注深藍(lán)互聯(lián)公眾號
          

          

            

              
              
              
            

            
Copyright ? 2013-2025 深藍(lán)互聯(lián) 版權(quán)所有

            
          

        

        
      

     

        友情鏈接：
        
      
      

      
    

  










    <tt id="yf2ex"><form id="yf2ex"></form></tt>
    <li id="yf2ex"><i id="yf2ex"></i></li>
    <menu id="yf2ex"></menu>
      <noframes id="yf2ex"></noframes>
    1. <strike id="yf2ex"></strike>
      <small id="yf2ex"></small>
      <tt id="yf2ex"></tt>