快捷導(dǎo)航

微信小程序組件開(kāi)發(fā)之可視化電影選座功能

更新時(shí)間：2021年08月18日 12:04:26 作者：Jusen_Fu

開(kāi)發(fā)微信小程序的過(guò)程中,選擇一款好用的組件庫(kù),可以達(dá)到事半功倍的效果,下面這篇文章主要給大家介紹了關(guān)于微信小程序組件開(kāi)發(fā)之可視化電影選座功能的相關(guān)資料,需要的朋友可以參考下

一. 簡(jiǎn)介

想必很多人都有陪男女朋友去看電影的經(jīng)歷吧，是不是在每次選座的時(shí)候你都要征求女盆友或男盆友的意見(jiàn)，什么？不征求？！那你完了！

目前市場(chǎng)上許多的電影購(gòu)票app和小程序中，為了讓觀眾老爺們?cè)诰€上更好地選擇自己心怡的位置，方便可視化的選座數(shù)據(jù)必不可少，在此，讓我們一起來(lái)看看這個(gè)好用的可視化選座組件吧!

視圖效果如下：

如果各位看官老爺感興趣的話，請(qǐng)繼續(xù)往下看！

1. 組件數(shù)據(jù)

首先呢，我們需要給該組件傳入兩個(gè)數(shù)據(jù)，以便顯示組件時(shí)使用，一個(gè)是電影廳的廳號(hào)，一個(gè)就是座位的數(shù)組，如下：

廳號(hào)：大寫數(shù)字字符串

座位數(shù)據(jù)：數(shù)組點(diǎn)陣，左右的空白用0表示，普通座位用1表示，優(yōu)選座位用2表示，已經(jīng)被其他觀眾選擇的座位用3表示，初始數(shù)據(jù)如下：

組件的 js文件中需聲明傳過(guò)來(lái)的數(shù)據(jù)，與頁(yè)面聲明方式不同，組件的properties中聲明數(shù)據(jù)需要寫出數(shù)據(jù)類型。

  properties: {
    seatings: Array,
    hallNumber: String
  },

2. 組件頁(yè)面布局

頁(yè)面中有能動(dòng)的，也有不能動(dòng)的，當(dāng)然還有自己能動(dòng)的；這個(gè)組件呢，頂部的標(biāo)識(shí)區(qū)屬于靜態(tài)部分和座位區(qū)是可移動(dòng)的并且可以雙指縮放，具體結(jié)構(gòu)如下：

1. 標(biāo)識(shí)區(qū)構(gòu)成

這個(gè)區(qū)域主要是起提示作用，提示座位的信息，包括了普通區(qū)和優(yōu)選區(qū)，當(dāng)然，代碼直接可以偷取座位區(qū)域中的座位的WXSS樣式，用signs_normal和seat_Excellent類名實(shí)現(xiàn)。當(dāng)然，誰(shuí)不喜歡c位呢~

    <view class="signs_normal">
      <view class="seatNormal"></view> <text>普通區(qū)</text> 
    </view>
    <view class="signs_excellent">
      <view class="seatExcellent"></view> <text>優(yōu)選區(qū)</text> 
    </view>
  </view>

2.座位區(qū)構(gòu)成

這個(gè)部分我們分為了三個(gè)小部分：屏幕，電影廳介紹和座位區(qū)，聽(tīng)我細(xì)細(xì)道來(lái)！

2.1 電影屏幕：

為實(shí)現(xiàn)熒幕弧形效果，俺們可以通過(guò)遮蓋法實(shí)現(xiàn)，非常好用! 先通過(guò)長(zhǎng)方形盒子構(gòu)建熒幕長(zhǎng)寬，再用一個(gè)橢圓形大餅的邊緣顯示在長(zhǎng)方形盒子里，其他部分用overflow: hidden屬性遮蓋，再調(diào)整背景顏色和邊框顏色即可實(shí)現(xiàn)熒幕效果

html如下：

<view class="visual_screen">
   <view class="screen"></view>
</view>

wxss如下：

.visual_screen {
  height: 30rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10rpx;
}
.screen {
  margin-top: 0;
  padding: 0;
  height: 30vw;
  width: 100vw;
  box-sizing: border-box;
  border: 15rpx solid #c9cdd3;
  border-radius: 50%;
}

2.2 電影廳介紹：

這部分相對(duì)來(lái)說(shuō)較為簡(jiǎn)單，直接插入傳輸過(guò)來(lái)的數(shù)據(jù)，微調(diào)樣式即可

wxml:

wxml:
<view class="visual_title">{{hallNumber}}號(hào)廳-（請(qǐng)佩戴口罩、1.3米以上兒童購(gòu)票）</view>
wxss：
.visual_title {
  font-size: 23rpx;
  width: 100%;
  height: 20rpx;
  text-align: center;
  color: #6d6d6d;
  margin-bottom: 30rpx;
}

2.3 座位區(qū)域：

基礎(chǔ)結(jié)構(gòu)：

基礎(chǔ)單位：由于設(shè)定座位的寬度為基本單位vw，便于統(tǒng)一單位和機(jī)型配適，所以我這里將高度也以vw為單位進(jìn)行設(shè)計(jì)

座位樣式 : 我們通過(guò)之前傳輸過(guò)來(lái)的座位數(shù)組可知，我們的座位形式有五種，分別是：seatNormal（普通座位）、seatExcellent（優(yōu)選座位）、seatNone（空白座位）、seatChosen（不可選座位）和selected（當(dāng)前已選座位），這里座位的基礎(chǔ)樣式是一樣的可以統(tǒng)一，再單獨(dú)寫各自獨(dú)特的樣式。其中空白座位只要設(shè)置邊框顏色為透明就可以達(dá)到效果。

.seatNormal, .seatExcellent, .seatNone, .seatChosen {
  height: 4vw;
  width: 4vw;
  margin: 1vw;
  border-radius: 8rpx;
  box-sizing: border-box;
}
.seatNormal {
  border: 1rpx solid #63c0c0;
}
.seatChosen {
  border: 1rpx solid red;
  background-color: red;
}
.selected {
  border: 1rpx solid #05ca90;
  background-color: #05ca90;
}
.seatExcellent {
  border: 1rpx solid #f18e14;
}
.seatNone {
  border: 1rpx solid rgba(0, 0, 0, 0);
}

推薦好用的樣式：在wxss中我們用到了一個(gè)非常好用的樣式 “box-sizing: border-box;”，這個(gè)樣式為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說(shuō)，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制，通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度，便于控制元素大小。

總體布局：座位區(qū)域使用的是彈性布局display：flex，并使用flex-wrap: wrap，讓座位填滿后自動(dòng)換行，大盒子包住一個(gè)盒子，讓里面的盒子彈性居中，達(dá)到整體居中的效果。

.visual_seatings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 43vw;
}
.visual_seating {
  width: 90%;
  height: 43vw;
  display: flex;
  flex-wrap: wrap;
}

可移動(dòng)可縮放區(qū)域: 由于方便座位選擇，我們?cè)O(shè)定座位區(qū)域可移動(dòng)，并可通過(guò)雙指縮放的，所以我們需要用到微信小程序的一個(gè)API：movable-area和 movable-view。

movable-area: 這個(gè)區(qū)域必須設(shè)置width和height屬性，不設(shè)置則默認(rèn)為10px，同時(shí)，當(dāng)movable-view小于movable-area時(shí)，movable-view的移動(dòng)范圍是在movable-area內(nèi)，當(dāng)movable-view大于movable-area時(shí)，movable-view的移動(dòng)范圍必須包含movable-area（x軸方向和y軸方向分開(kāi)考慮）。

movable-view：標(biāo)簽屬性設(shè)定移動(dòng)方向全方位direction="all"；支持雙指縮放scale="{{true}}"；最大最小縮放倍數(shù)scale-min="0.3"和scale-max="1.5";如果想綁定觸發(fā)條件還可以添加綁定方法,拖動(dòng)綁定事件:bindchange,縮放綁定事件bindscale等等

little tips: 由于movable-view區(qū)域在放大時(shí), 所處的x, y坐標(biāo)不變會(huì)導(dǎo)致view區(qū)域會(huì)超出area區(qū)域. 為了view可移動(dòng)區(qū)域不遮擋上方元素, 所以可采取減少放大倍數(shù)上限并可在上方添加一些空白區(qū)域, 增加頁(yè)面美觀性.

詳細(xì)用法參考微信小程序官網(wǎng)手冊(cè):
developers.weixin.qq.com/miniprogram…

3. 組件業(yè)務(wù)邏輯

座位數(shù)據(jù)輸出 : 上回說(shuō)到，座位數(shù)據(jù)是由數(shù)組存儲(chǔ)的，里面不同的座位用不同的數(shù)字表現(xiàn), 所以我們?cè)谳敵鰯?shù)據(jù)時(shí)需要作判斷. 這里通過(guò)block標(biāo)簽對(duì)數(shù)組數(shù)據(jù)循環(huán)輸出, 然后判斷數(shù)組數(shù)據(jù), 輸出不同的格式.

選擇座位 : 要做到在用戶點(diǎn)擊某個(gè)座位時(shí), 那個(gè)座位樣式改變并記錄座位數(shù)據(jù). 首先, 需要傳輸在循環(huán)時(shí)的下標(biāo)數(shù)據(jù)wx:for="{{seatings}}" wx:key="Index" data-index="index", 每個(gè)座位的view中綁定selected事件, 在js文件selected方法中收到下標(biāo)數(shù)據(jù);

我們需要用到已選擇座位的總數(shù)(限制為六個(gè))和下標(biāo)數(shù)組(儲(chǔ)存已點(diǎn)擊的座位)兩個(gè)數(shù)據(jù), 所以我們?cè)赿ata中聲明selectedIndex: [ ], selectedNum: 0, methods方法中聲明方法;

selected方法邏輯 : 先保存下標(biāo)index, 判斷下標(biāo)數(shù)組中是否存在該元素(使用數(shù)組的indexOf()方法), 若存在,則表明之前已選擇現(xiàn)在再次點(diǎn)擊取消, 需刪除將改下標(biāo)從下標(biāo)數(shù)組在刪除,總已選擇座位數(shù)減一 ; 否則不存在則判斷已選擇總數(shù)是否小于6,小于則將該數(shù)據(jù)插入數(shù)組中, 總已選擇座位數(shù)加一, 不小于提示最多選擇六張票;

這個(gè)時(shí)候，我們就有了下表數(shù)據(jù)啦，就可進(jìn)行更多更復(fù)雜的業(yè)務(wù)操作啦??！

tip : 由于數(shù)組沒(méi)有移除某個(gè)元素的方法 , 所以另外聲明remove()方法, 先獲取元素下標(biāo)再刪除.

selected(e) {
      let index = e.currentTarget.dataset.index;
      if(this.data.selectedIndex.indexOf(index) != -1){
        let selectedIndex =  this.remove(this.data.selectedIndex, index);
        let selectedNum = this.data.selectedNum - 1;
        this.setData({
          selectedIndex,
          selectedNum
        })
      }else{
        if(this.data.selectedNum < 6){
        let selectedNum = this.data.selectedNum + 1;
        let selectedIndex = this.data.selectedIndex.concat(index);
            this.setData({
              selectedIndex,
              selectedNum
            })
        }else{
            wx.showToast({
              title: '最多選擇六張票',
              })
            }
        }
    },
    remove(arr, ele) {
      var index = arr.indexOf(ele); 
      if (index > -1) { 
      arr.splice(index, 1); 
        }
        return arr;
      }

已選樣式改變 : 在座位view中, 我們用到了三元運(yùn)算符進(jìn)行數(shù)據(jù)判斷: class="{{tools.indexOf(selectedIndex, index)?'selected': ''}}" 若前面的結(jié)果為true即數(shù)組中存在這個(gè)數(shù)據(jù)的下標(biāo), 則添加selected類名, 座位樣式改變; 否則添加空類名.

tips : 由于數(shù)組的indexOf方法在wxml中失效，所以我們需要在pages同級(jí)目錄下util文件夾中聲明一個(gè)indexOf函數(shù)供三元運(yùn)算調(diào)用，自己動(dòng)手豐衣足食！使用時(shí)只需通過(guò) wxs src="../../util/indexof.wxs" module="tools" 進(jìn)行聲明，就可使用 tools.indexOf 方法，效果和數(shù)組自帶的indexOf方法是一樣一樣的~

// indexOf方法
function indexOf(arr, value) {
  if (arr.indexOf(value) < 0) {
      return false;
  } else {
      return true;
  }
}
module.exports.indexOf = indexOf;

具體組件源碼如有需要的話，請(qǐng)?jiān)趃itee中獲取哦!
gitee.com/jensmith/so…