当前位置: 首页 > news >正文

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

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

这里写目录标题

  • 效果图
  • 代码——`html`部分
            • `cu-custom`组件
            • `anil-seat`组件
  • 代码——`js`+`css`部分

效果图

在这里插入图片描述

代码——html部分

<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中的写法:

// 此处为引用自定义顶部
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom);
cu-custom组件
<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部分

<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>

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

http://www.lryc.cn/news/165639.html

相关文章:

  • 领域驱动设计:微服务的各种边界
  • MySQL之数据类型
  • 词法作用域改变词法作用域
  • 关于C++的隐藏 (hidden),重载(overload),重写(override)小结。
  • 算法通关村18关 | 透析回溯的模板
  • 【论文阅读】Untargeted Backdoor Attack Against Object Detection(针对目标检测的无目标后门攻击)
  • 分库分表---理论
  • [golang 流媒体在线直播系统] 2.搭建基于golang的流媒体服务器实现拉流推流,以及Html客户端拉取hls类型的流
  • 9月12日作业
  • React框架下如何集成H.265网页流媒体视频播放器EasyPlayer.js?
  • 《向量数据库》——向量数据库的使用场景有哪些?
  • Java 中 List 集合取补集
  • 我的个人网站——宏夏Coding上线啦
  • 【机器视觉】喇叭的外圆以及金属内圆的同心度视觉检测--康耐德智能
  • STM32WB55开发(2)----修改蓝牙地址
  • 【1++的C++进阶】之C++11(二)
  • 【VS2022】调试
  • python:使用RESTful API(flask)调用python程序传递参数,实现Web端调用python程序
  • 贪心算法(Greedy Algorithm)
  • 论文阅读 - Outlier detection in social networks leveraging community structure
  • 【操作系统】进程控制
  • Linux命令200例:expr一个用于进行数值表达式求值的工具
  • 当你的公司突然开始大量的裁员,被留下的你,真的准备好面对以后了吗?
  • 预约陪诊就诊小程序源码多城市开发版
  • upload-labs文件上传靶场实操
  • leetcode分类刷题:队列(Queue)(二、优先队列解决TopK简单问题)
  • 【排障记录】扩展坞USB 3.0能用而2.0不能用
  • 01-从JDK源码级别剖析JVM类加载机制
  • AI时代:探索机器学习与深度学习的融合之旅
  • 模块化开发_groupby查询think PHP5.1