使用姿勢
**獲取
尾巴之前ui丟了一張類似這樣的效果圖（當然這個是本文的效果圖，不是原圖，不過差不多）給我：
當時看到圖就想這個還不簡單，直接使用picker就行了。然後就是一頓操作，選擇mode為date，最終出現了效果圖：
正當我沉浸在完成功能的喜悅中的時候，心裡有個聲音一直在提醒我：你沒有達到ui需求效果，你沒有達到ui需求效果，你沒有達到ui需求效果…
通過分析ui圖可以發現，整個是由四部分組成：
.mask
.content
.top
.top-text
這裡主要是使用的系統提供的picekr-view實現，後面會給出完整**。
class
='mask'
wx:if
="}"
catchtap
="cancel"
>
class
="content"
style
="height
:500rpx
" animation
="}"
>
class
="top"
>
class
="top-text top-left-color"
hover-class
="top-left-color-hover"
catchtap
="lefttap"
>
全部view
>
class
="top-text top-right-color"
hover-class
="top-right-color-hover"
catchtap
="righttap"
>
確定view
>
view
>
style
="width
: 100%;
height
: 400rpx;
" value
="}"
bindchange
="bindchange"
catchtap
="no"
>
>
wx:for
="}"
style
="line-height
: 50px
" class
="item"
>
}年view
>
picker-view-column
>
picker-view
>
view
>
view
>
var that
component(,
//結束年份
end:},
/** * 元件的初始資料
*/data:
, attached:
function()
)//500rpx轉成px
var dialoghpx =
500/
750* wx.
getsysteminfosync()
.windowwidth
that.
setdata()
},detached:
function()
, pagelifetimes:
//通過配置屬性獲取years
that.
setdata()
},//元件所在的頁面被隱藏時執行 最低版本2.2.3
hide:
function()
,//這個函式一般使用場景較少，了解就可以了 最低版本2.4.0
resize:
function
(size)},
/** * 元件的方法列表
*/methods:)}
,//這個current不放properties中是因為properties中的屬性只會初始化一次，而這裡需要動態改變
showdialog
(current)
)var currentindex =
0//篩選出缺省選擇專案
that.data.years.
foreach
(function
(v,i,s)})
that.
setdata()
//先向下移動dialog高度，然後恢復原位從而形成從下向上彈出效果
that.animation.
translatey
(that.data.dialogh)
.translatey(0
).step()
that.
setdata()
},cancel()
,dimsss()
)//動畫結束後蒙層消失
settimeout((
)=>)}
,300)}
,lefttap()
,righttap()
) that.
dimsss()
}}})
.mask
.content
.top
.top-text
.top-left-color
.top-left-color-hover
.top-right-color
.top-right-color-hover
.item
"usingcomponents":
"showpicker">自定義picker
"custom-picker" start="2018" end="2020"
bind
:lefttap='_lefttap'
bind
:righttap='_righttap' bindcancel="_cancel"/>
var that
page(
, onload: function ()
, onready: function ()
, showpicker()
, _lefttap())}
, _righttap(e)
) //儲存選擇的年份
that.setdata()}
, _cancel())}
})
微信小程式 picker
本文章主要解釋乙個mode為selector，平常比較常用的一些固定的選擇，我們平常就這樣子寫了，picker bindchange bindcaspickerchangestatusemployee value range name employeestatus text 在職資訊 text te...
微信小程式 自定義二維picker元件（省市）
html js 初始化 二位陣列 multiarray multiindex 0,0 後台資料 arealist 轉換格式 const formatarealist arealist arealist.foreach item,index cityarrobj item.name cityarr c...
微信小程式實現自定義picker選擇器彈窗內容
微信小程式中定義好的幾種picker選擇器，不管是日期選擇器還是地區選擇器，或是其他的都有定死的樣式和內容。例如 但是大多數開發程式的情況下還是需要自己寫樣式的，或是內容的。例如 wxml css free dialog mask free dialog container free dialog ...