uniapp——实现在线选座功能——技能提升

首先声明一点:下面的内容是从一个uniapp的程序中摘录的,并非本人所写,先做记录,以免后续遇到相似需求抓耳挠腮。

这里写目录标题

效果图

代码------html部分

js 复制代码
<template>
  <view>
	  <cu-custom class="navBox" bgColor="bg-gradual-blue" :isBack="true">
	  	<block slot="backText">返回</block>
	  	<block slot="content">在线选座</block>
	  </cu-custom>
	  
    <anil-seat 
      title="皮皮鲁与鲁西西之罐头小人"
      info="2021年10月22日 国语 奇幻 喜剧 儿童"
      room-name="5号厅"
      :seat-data="seatData" 
      :max="4" 
      @confirm="onConfirmSeat">
    </anil-seat>
  </view>
</template>

上面代码中的cu-custom组件是全局注册到main.js中的组件:

main.js中的写法:

js 复制代码
// 此处为引用自定义顶部
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom);
cu-custom组件
js 复制代码
<template>
	<view>
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgColor]">
				<view class="action" @tap="BackPage" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar
			};
		},
		name: 'cu-custom',
		computed: {
			style() {
				var StatusBar= this.StatusBar;
				var CustomBar= this.CustomBar;
				var bgImage = this.bgImage;
				var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
				if (this.bgImage) {
					style = `${style}background-image:url(${bgImage});`;
				}
				return style
			}
		},
		props: {
			bgColor: {
				type: String,
				default: ''
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
		},
		methods: {
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
anil-seat组件

由于内容过多,暂不进行展示,有需要的可以评论区留下邮箱。

代码------js+css部分

js 复制代码
<script>
  import anilSeat from '@/components/anil-seat/components/anil-seat/anil-seat.vue'
  import {
  	seatData
  } from '@/common/seat-data.js'
  export default {
	components: {anilSeat},
    data() {
      return {
        seatData: seatData
      };
    },
    methods: {
      onConfirmSeat (items) {
        console.log(items)
      }
    }
  }
</script>

<style lang="scss">
page {
  background-color: #eee;
  height: 100%;
}
</style>

完成!!!多多积累,多多收获!!!

相关推荐
毛毛三由18 小时前
【uniapp】微信小程序修改按钮样式
微信小程序·小程序·uni-app
巴博尔18 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
技术钱18 小时前
uniapp使用音频录音功能
chrome·uni-app·音视频
焚 城18 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
2501_916007471 天前
iOS 26 软件性能测试 新版系统下评估全流程 + 多工具辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
xiaohe06011 天前
🎉 Uni ECharts 2.0 正式发布:原来在 uni-app 中使用 ECharts 可以如此简单!
uni-app·echarts
00后程序员张1 天前
Swoole HTTPS 实战,在生产环境部署、性能权衡与排查流程
后端·ios·小程序·https·uni-app·iphone·swoole
2501_915909061 天前
iOS App 上架全流程详解:证书配置、打包上传、审核技巧与跨平台上架工具 开心上架 实践
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
iOS 26 系统流畅度测试实战分享,多工具组合辅助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915918411 天前
开发 iOS 应用全流程指南,环境搭建、证书配置与跨平台使用 开心上架 上架AppStore
android·ios·小程序·https·uni-app·iphone·webview