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>

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

相关推荐
2501_915918411 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张13 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬15 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063215 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq15 小时前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy15 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
写代码的jiang15 小时前
打造精简高效的 uni-app 网络请求工具
uni-app
!win !1 天前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
xw51 天前
uni-app项目支付宝端Input不受控
前端·uni-app·支付宝