效果：

渲染：

<!-- 中間標志 --> <view class='view-price'><view class='view-price-num'><image class='view-price-img' src='img/seat.png'></image>可選</view><view class='view-price-num'><image class='view-price-img' src='img/noseat.png'></image>不可選</view><view class='view-price-num'><image class='view-price-img' src='img/select.png'></image>已選</view><view class='view-price-num'><image class='view-price-img' src='img/seatss.png'></image>有人</view> </view> <!-- 座位 --> <view class='view-all'><view class='view-price-column'><block wx:for="{{seatClumn}}"><view class='view-price-column-num' style='background:{{item.color}};'><text style='width:100%;text-align:center;'>{{item.name}}</text></view></block></view><view style='width:80%;'><view wx:for="{{seatAll}}" wx:for-item="all" wx:for-index="allIdx" class='view-seat-all'><view class='view-up-seat'><view class='view-left-seat-up'><view wx:for="{{all.A}}" wx:for-index="itemIdx"><image bindtap='clickSeat' data-All='{{allIdx}}' data-On='A' data-Item="{{itemIdx}}" class='view-price-img-up' style='transform: rotate(180deg);' src='img/{{item.name == "*" ? "noseat":(item.name ? "seatss":(item.nameSeat == selectSeat ? "select":"seat"))}}.png'></image></view></view><view class='view-left-seat-up'><view wx:for="{{all.B}}" wx:for-index="itemIdx"><image bindtap='clickSeat' data-All='{{allIdx}}' data-On='B' data-Item="{{itemIdx}}" class='view-price-img-up' src='img/{{item.name == "*" ? "noseat":(item.name ? "seatss":(item.nameSeat == selectSeat ? "select":"seat"))}}.png'></image></view></view></view><view class='view-bottom-seat'>過道</view></view></view> </view> <i-button bind:click="submitApplication" wx:if="{{selectSeat.length}}" type="primary" size="small">申請座位{{selectSeat}}</i-button> <i-modal title="持有人" visible="{{ visible1 }}" bind:ok="handleClose1" bind:cancel="handleClose1"><view>{{nameSeatOn}}</view> </i-modal> <i-spin size="large" fix wx:if="{{ spinShow }}"></i-spin> <i-message id="message" />

邏輯層：

const {$Message } = require('../../dist/base/index'); Page({/*** 頁面的初始數據*/data: {visible1: false,nameSeatOn: '',allS: '',onS: '',itemS: '',selectSeat: '',seatAll: [],seatClumn: [],spinShow: false},/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {let _this = thisconst db = wx.cloud.database()let tempSeatClumn = []let tempSeatAll = []_this.setData({spinShow: true})db.collection('sXuns_seatClumn').get().then(res => {for (let i = 0; i < res.data.length; i++) {tempSeatClumn.push(res.data[i])}_this.setData({seatClumn: tempSeatClumn})})db.collection('sXuns_seatAll').get().then(res => {for (let i = 0; i < res.data.length; i++) {tempSeatAll.push(res.data[i])}_this.setData({seatAll: tempSeatAll})})setTimeout(res => {_this.setData({spinShow: false})}, 1500)},clickSeat: function(res) {let _this = thislet all = res.currentTarget.dataset.alllet on = res.currentTarget.dataset.onlet item = res.currentTarget.dataset.itemlet temp = ''if (on == "A") {temp = _this.data.seatAll[all].A[item]} else {temp = _this.data.seatAll[all].B[item]}if (temp.name) {_this.setData({nameSeatOn: temp.nameSeat + ":" + temp.name})this.setData({visible1: true});} else {if (_this.data.selectSeat != temp.nameSeat) {_this.setData({selectSeat: temp.nameSeat})} else {_this.setData({allS: all,onS: on,itemS: item,selectSeat: ''})}}console.log("數據", _this.data.nameSeatOn)},handleClose1() {this.setData({visible1: false});},submitApplication: function() {$Message({content: '已提交后臺審核',type: 'success'});} })

樣式：

.view-price {display: flex;flex-flow: row wrap;justify-content: space-around;padding: 20rpx 0rpx;border-bottom: #dcdcdc solid 2rpx;background: white; }.view-price-num {height: 60rpx;line-height: 60rpx;font-size: 30rpx;border: #dcdcdc solid 2rpx;width: 148rpx;text-align: center;display: flex; }.view-price-img {width: 30rpx;height: 30rpx;padding: 16rpx 10rpx; }.view-all {display: flex;flex-direction: row;}.view-price-column {display: flex;flex-flow: column wrap;justify-content: space-around;padding: 20rpx 10rpx;border-bottom: #dcdcdc solid 2rpx;background: white;width: 20%; }.view-price-column-num {height: 260rpx;line-height: 270rpx;font-size: 20rpx;border: #dcdcdc solid 1rpx;width: 148rpx;text-align: center;display: flex;color: #fff; }.view-price-column-num:last-child{height: 40rpx;line-height: 30rpx;font-size: 20rpx;border: #dcdcdc solid 1rpx;width: 148rpx;text-align: center;display: flex;color: #666; }.view-up-seat {margin: 0 auto;background: #fff;height: 170rpx;margin-top: 10rpx;display: flex;flex-direction: column; }.view-left-seat-up {display: flex;flex-direction: row; }.view-price-img-up {width: 60rpx;height: 60rpx;margin: 3rpx; }.view-bottom-seat{background: #ce590c;text-align: center;color: #fff;height: 40rpx;line-height: 34rpx; }.view-seat-all{width: 90%;margin: 0 auto;font-size: 24rpx; }

總結

以上是生活随笔為你收集整理的[006]小程序系列 | 简单实现电影院选座位Demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。