微信小程序菜單實(shí)現(xiàn)

最近一個(gè)月都在做微信小程序枉氮,作為一個(gè)Android開發(fā)者惶岭,在這一個(gè)月很少寫Android的代碼呐萌,真是悲催,好在現(xiàn)在已經(jīng)完整的把小程序做完了错沽,下周就繼續(xù)開始我的Android生涯了簿晓,現(xiàn)在回過(guò)頭來(lái)寫寫自己認(rèn)為比較常見的一些功能的實(shí)現(xiàn),來(lái)幫助小程序?qū)W習(xí)愛好者學(xué)習(xí)參考千埃。今天的這篇文章是關(guān)于微信小程序菜單的實(shí)現(xiàn)憔儿,話不多說(shuō),上圖放可。

menu1.gif

源碼傳送門

通過(guò)效果圖谒臼,我們看到,窗口最上面是兩個(gè)菜單按鈕吴侦,它是固定懸浮在最上面屋休,當(dāng)點(diǎn)擊時(shí)分別顯示狀態(tài)選擇和時(shí)間選擇,那此處狀態(tài)就是我們購(gòu)物訂單的狀態(tài)备韧,有全部劫樟,待付款,等织堂,并且當(dāng)前選中的狀態(tài)加上紅色的邊框叠艳,讓用戶知道當(dāng)前的選擇項(xiàng)。那點(diǎn)擊時(shí)間時(shí)就顯示顯示開始日期和結(jié)束日期易阳,當(dāng)點(diǎn)擊確定時(shí)對(duì)當(dāng)前日期時(shí)間段的購(gòu)物訂單進(jìn)行過(guò)濾附较。

狀態(tài)和時(shí)間菜單按鈕實(shí)現(xiàn)

菜單按鈕實(shí)現(xiàn)很簡(jiǎn)單,使用display:flex屬性潦俺,使用position: fixed將其定位窗口顯示 top: 0;left: 0;懸浮在最上面拒课。上下都加上邊框。

  <view class="top-menu">
    <view bindtap="showMenuTap" data-type="1">狀態(tài)</view>
    <view class="line"></view>
    <view bindtap="showMenuTap" data-type="2">時(shí)間</view>
  </view>

樣式

.top-menu {
  display: flex;
  position: fixed;
  height: 80rpx;
  z-index: 10;
  background-color: #fff;
  width: 100%;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: space-around;
  border-top: 2rpx solid #ddd;
  border-bottom: 2rpx solid #ddd;
  font-size: 11pt;
  color: #bdbdbd;
}

.line {
  width: 2rpx;
  height: 100%;
  background-color: #ddd;
}

兩個(gè)菜單中間的分割線事示,我使用了一個(gè)view早像,當(dāng)然依然可以使用border屬性。在此處給加個(gè)z-index屬性肖爵。稍后會(huì)介紹到他的作用卢鹦。

彈出菜單實(shí)現(xiàn)

<view wx:if="{{menuType==1}}" class="state-menu "  hidden="{{!isVisible}}">
  <view class="state-item {{status==1?'border':''}}" bindtap="selectState" data-status="1">全部</view>
  <view class="state-item {{status==2?'border':''}}" bindtap="selectState" data-status="2">待付款</view>
  <view class="state-item {{status==3?'border':''}}" bindtap="selectState" data-status="3">待發(fā)貨</view>
  <view class="state-item {{status==4?'border':''}}" bindtap="selectState" data-status="4">配送中</view>
  <view class="state-item {{status==5?'border':''}}" bindtap="selectState" data-status="5">待收貨</view>
  <view class="state-item {{status==6?'border':''}}" bindtap="selectState" data-status="6">待評(píng)價(jià)</view>
  <view class="state-item {{status==7?'border':''}}" bindtap="selectState" data-status="7">退款</view>
  <view class="state-item {{status==8?'border':''}}" bindtap="selectState" data-status="8">已取消</view>
</view>
<!--日期選擇-->
<view wx:elif="{{menuType==2}}" class="state-menu" hidden="{{!isVisible}}">
  <view class="date">
    <view class="classname">開始日期: </view>
    <picker mode="date" value="{{date}}" data-type="1" bindchange="bindDateChange">
      <view class="classname">{{begin==null?'不限':begin}}</view>
    </picker>
  </view>
  <view class="date">
    <view class="classname">結(jié)束日期: </view>
    <picker mode="date" value="{{date}}" data-type="2" bindchange="bindDateChange">
      <view class="classname">{{end==null?'不限' : end}}</view>
    </picker>
  </view>
  <button class="date-btn" bindtap="sureDateTap">確定</button>
</view>

樣式

.state-menu {
  display: flex;
  position: fixed;
  left: 0;
  height: 200rpx;
  top: 80rpx;
  width: 100%;
  z-index: 9;
  background-color: #fff;
  flex-direction: row;
  border-bottom: 2rpx solid #ddd;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.state-item {
  width: 20%;
  height: 70rpx;
  font-size: 11pt;
  line-height: 70rpx;
  text-align: center;
  border-radius: 10rpx;
  border: 2rpx solid #ddd;
}

.border.state-item {
  border: 2rpx solid #c4245c;
}

.date {
  min-width: 40%;
  display: flex;
  font-size: 11pt;
  color: #bdbdbd;
  align-items: center;
}

.date-btn {
  min-width: 80%;
  font-size: 12pt;
  background-color: #c4245c;
  color: #fff;
}

彈出菜單我們?cè)O(shè)置高度為200rpx,依然使用position屬性fixed將其固定在菜單按鈕下面,由于菜單按鈕我們?cè)O(shè)置的高度是80rpx,為了顯示在菜單按鈕下面劝堪,我們將top設(shè)置為80rpx.flex-wrap指定為wrap作用就是當(dāng)item超出屏幕寬度時(shí)自動(dòng)換行冀自。由于我們?cè)O(shè)置狀態(tài)的state-item的寬度為20%,所以當(dāng)顯示四個(gè)item時(shí)會(huì)換新行顯示(五個(gè)item100%再加上border會(huì)超過(guò)寬度,所以第五個(gè)在新行顯示(使用box-sizing: border-box秒啦,可讓border寬度輸入item的寬度熬粗,即item的20%包含border寬度))。

picker 組件是底部彈起的滾動(dòng)選擇器帝蒿,現(xiàn)支持三種選擇器荐糜,通過(guò)mode來(lái)區(qū)分,分別是普通選擇器(mode = selector),時(shí)間選擇器(mode = time)暴氏,日期選擇器(mode = date)延塑,默認(rèn)是普通選擇器,所以我們?cè)诖颂幵O(shè)置mode = date答渔。并且可以通過(guò)start設(shè)置有效日期范圍的開始关带,字符串格式為"YYYY-MM-DD",通過(guò)end設(shè)置有效日期范圍的結(jié)束沼撕,字符串格式為"YYYY-MM-DD"宋雏。選擇的日期通過(guò)e.detail.value獲得。

透明蒙版效果

當(dāng)我們使用系統(tǒng)組件picker 彈出選擇器時(shí)务豺,我們會(huì)看到有一個(gè)透明的蒙版效果磨总,那么我們也實(shí)現(xiàn)一個(gè)蒙版效果

<view class="dialog-mask" style="visibility:{{isVisible ? 'visible':'hidden'}}" bindtap="hideMenuTap" />

樣式

.dialog-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background: rgba(0, 0, 0, 0.3);
}

我們給蒙版設(shè)置了一個(gè)點(diǎn)擊事件當(dāng)點(diǎn)擊時(shí)直接隱藏彈出菜單,樣式使用了position:fixed屬性笼沥,并將top,left,right,bottom都設(shè)置為0蚪燕,即將蒙版全屏顯示,設(shè)置背景黑色奔浅,透明的為0.3.此處依然使用了 z-index馆纳, z-index是z軸顯示的深度,值越大汹桦,離我們?cè)浇呈唬粗荡髸?huì)顯示在值小的上面。所以我們將蒙版 z-index設(shè)置為8舞骆,菜單按鈕設(shè)置為10钥弯,彈出菜單設(shè)置為9.這樣也就看到文章開頭圖中的效果。

動(dòng)畫實(shí)現(xiàn)

通過(guò)上面的實(shí)現(xiàn)督禽,已經(jīng)可以達(dá)到我們想要的效果寿羞,但是顯示和隱藏的時(shí)候比較突兀,我們?cè)俳o它加點(diǎn)動(dòng)畫赂蠢,動(dòng)畫的實(shí)現(xiàn)其實(shí)很簡(jiǎn)單,在這里介紹兩種實(shí)現(xiàn)動(dòng)畫的方式辨泳,第一個(gè)是直接使用在樣式文件wxss中實(shí)現(xiàn)虱岂,另一種是通過(guò)微信小程序提供的動(dòng)畫Api實(shí)現(xiàn)。
需要注意的是如果添加動(dòng)畫不能使用hidden屬性顯示隱藏彈出菜單菠红,而是使用visibility第岖,否則看不到動(dòng)畫效果。
樣式文件wxss實(shí)現(xiàn)方式:

.hidden.state-menu {
  transform: translateY(-200rpx);
  transition: all 0.4s ease;
  visibility: hidden;
}

.show.state-menu {
  transform: translateY(0);
  transition: all 0.4s ease;
  visibility: visible;
}
<view wx:if="{{menuType==1}}" class="state-menu {{isVisible?'show':'hidden'}}">

API createAnimation創(chuàng)建動(dòng)畫方式

微信小程序提供了createAnimation創(chuàng)建動(dòng)畫试溯,包括平移蔑滓,旋轉(zhuǎn),縮放,傾斜等键袱,并且實(shí)現(xiàn)方式簡(jiǎn)單燎窘,在這里就不在詳細(xì)介紹API了,具體可參看官方文檔

//定義變量
var animation
//在page中data中加入變量
animationData: {}
//onLoad初始化變量animation 
 var animation = wx.createAnimation({
      duration: 500,
      transformOrigin: "50% 50%",
      timingFunction: 'ease',
    })
    this.animation = animation;

// 執(zhí)行動(dòng)畫函數(shù)
  startAnimation: function (isShow, offset) {
    var that = this
    var offsetTem
    if (offset == 0) {
      offsetTem = offset
    } else {
      offsetTem = offset + 'rpx'
    }
   //translateY可以加入單位(如20+'rpx'或者20+'vh'蹄咖,不寫單位時(shí)默認(rèn)px)褐健,當(dāng)0時(shí)不能加單位,否則動(dòng)畫無(wú)效果
    this.animation.translateY(offset).step()
    this.setData({
      animationData: this.animation.export(),
      isVisible: isShow
    })
  },

然后只需要在view標(biāo)簽中加入animation="{{animationData}}"就可以看到動(dòng)畫效果了。到這里澜汤,已經(jīng)實(shí)現(xiàn)了所以效果蚜迅,當(dāng)然側(cè)滑,或者從下面彈出俊抵,等都可以通過(guò)這個(gè)思想實(shí)現(xiàn)谁不。文中js的一些邏輯代碼沒(méi)在文中貼出,代碼我已上傳Github徽诲,可以前往查看

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末刹帕,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子馏段,更是在濱河造成了極大的恐慌轩拨,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件院喜,死亡現(xiàn)場(chǎng)離奇詭異亡蓉,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)喷舀,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門砍濒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人硫麻,你說(shuō)我怎么就攤上這事爸邢。” “怎么了拿愧?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵杠河,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我浇辜,道長(zhǎng)券敌,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任柳洋,我火速辦了婚禮待诅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘熊镣。我一直安慰自己卑雁,他們只是感情好募书,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著测蹲,像睡著了一般莹捡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上弛房,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天道盏,我揣著相機(jī)與錄音,去河邊找鬼文捶。 笑死荷逞,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的粹排。 我是一名探鬼主播种远,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼顽耳!你這毒婦竟也來(lái)了坠敷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤射富,失蹤者是張志新(化名)和其女友劉穎膝迎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胰耗,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡限次,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了柴灯。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片卖漫。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖赠群,靈堂內(nèi)的尸體忽然破棺而出羊始,到底是詐尸還是另有隱情,我是刑警寧澤查描,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布突委,位于F島的核電站,受9級(jí)特大地震影響冬三,放射性物質(zhì)發(fā)生泄漏鸯两。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一长豁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧忙灼,春花似錦匠襟、人聲如沸钝侠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)帅韧。三九已至,卻和暖如春啃勉,著一層夾襖步出監(jiān)牢的瞬間忽舟,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工淮阐, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留叮阅,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓泣特,卻偏偏與公主長(zhǎng)得像浩姥,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子状您,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)勒叠、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,064評(píng)論 4 62
  • 今天參加了家長(zhǎng)會(huì)膏孟,首先是陳校長(zhǎng)講話眯分,講了學(xué)校的師資、變化柒桑、管理弊决、還有家校合育存在的一些問(wèn)題和收獲,說(shuō)起廈小最近取得...
    李宇航媽媽閱讀 245評(píng)論 0 0
  • 話說(shuō)當(dāng)年填志愿的時(shí)候幕垦,我的同桌跟我說(shuō)她們家有個(gè)親戚是做什么什么工作的丢氢,所以她要寫某個(gè)志愿,方便以后工作先改,我當(dāng)時(shí)還嗤...
    張阿狗閱讀 322評(píng)論 2 1
  • 初中同學(xué)兼同桌好朋友,為在去年的時(shí)候辭職在家沒(méi)有工作,于是在微信上和我聯(lián)系疚察,需要一份工作,要來(lái)我工作的地方上班...
    梁城涼夢(mèng)涼人心閱讀 374評(píng)論 2 2
  • 第二次營(yíng)銷策劃開課了!看著很多熟悉又陌生的面孔再次走進(jìn)系統(tǒng)內(nèi)心深深的被先生的智慧所折服该溯!贏家真的是一個(gè)超級(jí)...
    落子無(wú)悔ss閱讀 228評(píng)論 0 0