flex day 3-html和window组件

本文介绍了使用Adobe Flex框架创建应用程序的过程,重点讲解了HTML组件的使用及遇到的问题,并演示了如何通过Window组件来实现新窗口的弹出,包括设置窗口属性及事件监听。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

air的html组件,但是html的显示出来怪怪的

	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<mx:ControlBar width="100%">
		<s:Button label="<Back" click="content.historyBack();"/>
		<mx:Button label="Forward >" click="content.historyForward();"/>
		<mx:TextInput id="address" text="{content.location}" width="100%"/>
		<mx:Button label="GO" click="content.location = address.text"/>
	</mx:ControlBar>
	<mx:Canvas width="100%" height="100%">
		<mx:HTML id="content" location="http://www.163.com" />
	</mx:Canvas>

接着就是window组件了。window组件很是神奇,其实就是打开一个新的窗口。

但是解决了我昨天的一个疑问,我想调用的另外一个B.mxml,我把那个B.mxml做成一个组件,

基于mx.core.Window,这样就能调用了,当作是一个window打开就是了。然后给newWindow

增加事件监听,这样可以在打开新窗口的时候隐藏旧窗口

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="placeWindow()">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.AIREvent;
			
			import spark.components.Window;
			private function placeWindow():void{
				this.nativeWindow.x = 200;
				this.nativeWindow.y = 200;
				
			}
			private function onCloseWindow():void{
				Alert.show("close window");
			}
			
			private function newWindow():void{
				var newWindow:Window = new myWindowCompnent;

				//newWindow.systemChrome = NativeWindowSystemChrome.NONE;
				//newWindow.transparent = true;
				newWindow.title = "new WINDOW";
				newWindow.width = 400;
				newWindow.height =  400;
				newWindow.open(true);
				newWindow.alpha = .9;
				
				newWindow.addEventListener(Event.CLOSING,showWindow);
			}
			private function hideWindow():void{
				this.nativeWindow.visible = false;
			}
			private function showWindow(evt:Event):void{
				this.nativeWindow.visible = true;
				
			}
		]]>
	</fx:Script>
	<mx:Label text="HI My Friend" horizontalCenter="0" verticalCenter="0"/>
	<s:Button label="new window" click="newWindow()" mouseDown="hideWindow()"/>
</s:WindowedApplication>

另myWindowCompnent的码是基于filesystem的


<s:Window xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<mx:HDividedBox>
		<mx:FileSystemTree id="tree"
						   width="200" height="100%" direction="{new File('c:\\')}"
						   enumerationMode="directoriesOnly"
						   change="dataGrid.directory = File(tree.selectedItem);"/>
		<mx:FileSystemDataGrid id="dataGrid"
							   width="100%" height="100%"
							   directory="{new File('c:\\')}"/>
	</mx:HDividedBox>
</s:Window>


<template> <view class="page"> <!-- 头部 start --> <view class="cu-custom bg-white" :style="[{ height: CustomBar + &#39;px&#39;, paddingTop: StatusBar + &#39;px&#39; }]"> <view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + &#39;px&#39;, paddingTop: StatusBar + &#39;px&#39; }]"> <view class="action" @tap="back"><text class="cuIcon-back"></text></view> <view class="search-form round"> <text class="cuIcon-search text-999"></text> <input confirm-type="search" class="text-999" type="text" v-model="keywords" :adjust-position="false" :hold-keyboard="false" placeholder-style="color:#999" :placeholder="placeholder" @confirm="searchConfirm" /> <text v-if="keywords.length != 0" class="cuIcon-close text-gray padding-right-xs" @tap="handleClear"></text> </view> <view class="right" style="margin-left: 11px;"> <!-- <text class="cuIcon-search" style="font-size: 36rpx;" @click="searchConfirm($event,1)"></text> --> <!-- <view style="width:40rpx;height:100%;margin-right: 10px;" class="flex align-center" > --> <view class=" lg text-gray nav_title flex align-center" @click="showCalendar" :style="{height: CustomBar + &#39;px&#39;}"> <image src="@/static/calendar.png" mode="" /> </view> <!-- </view> --> </view> </view> </view> <view class="cu-bar bg-white" style="height:50px"> <view class="search-form round"> <text class="cuIcon-search text-999"></text> <input confirm-type="search" class="text-999" type="text" v-model="gkeywords" :adjust-position="false" :hold-keyboard="false" placeholder-style="color:#999" :placeholder="gplaceholder" @confirm="searchConfirm" /> <text v-if="gkeywords.length != 0" class="cuIcon-close text-gray padding-right-xs" @tap="ghandleClear"></text> </view> <view class="right" style="margin-left: 11px;margin-right: 11px;"> <!-- <text class="cuIcon-search" style="font-size: 36rpx;" @click="searchConfirm($event,1)"></text> --> <!-- <view style="width:40rpx;height:100%;margin-right: 10px;" class="flex align-center" > --> <image :src="STATIC_URL + &#39;integral_sao.png&#39;" style="width: 40rpx;height: 40rpx;" @click.stop="handleScan() "></image> <!-- </view> --> </view> </view> <!-- 头部 end --> <!-- loading组件 --> <fu-loading v-if="isShowLoading"></fu-loading> <!--商品列表 start--> <scroll-view v-else class="list" scroll-y="true"> <block v-for="item in lists"> <view class="solid-bottom fu-goods-line"> <view class="content"> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>采购单号</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.bill_code}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>交易日期</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.bill_date}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>币种编码</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.currency_code}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>币种符号</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.currency_symbol}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>状态</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.status_txt}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>仓库编码</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.storage_code}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>仓库名称</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.storage_name}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>供货商编码</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.supplier_code}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>供货商名称</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.supplier_name}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>备注</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.remark}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>创建者</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.creator}}</text> </view> <view class="flex box"> <view class="flex justify-between tit text-df"> <text>创建日期</text> <text class="mao">: </text> </view> <text class="con text-999">{{item.create_time}}</text> </view> <view class="flex justify-between"> <view class="flex align-center"></view> <button class="kc" @tap.stop="detail(item)">查看详情</button> </view> </view> </view> </block> <!-- 空布局 --> <fu-empty-ui v-if="lists.length == 0 && !isShowLoading"></fu-empty-ui> <!-- 加载状态 --> <uni-load-more v-if="lists.length > 5" :status="status"></uni-load-more> </scroll-view> <!--商品列表 end--> <!-- 悬浮按钮 --> <fu-popup ref="coupon" mode="center" width="600rpx" height="80%" border-radius="14" :mask-close-able="true" v-model="xqpop" @close="handleClose"> <view class="rule-box"> <view class="rule-box-title solid-bottom"> 采购单详情 </view> <scroll-view class="rule-box-content" scroll-y> <view class="pop-box" v-for="(item,index) in caigouDetail"> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">行号</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.index}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">总价</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.sum}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">数量</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.size}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">单价</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.price}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">状态</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.status_txt}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">已入库数量/已出库数量</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.receive}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">税率</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.tax_rate}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">规格编码</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.spec_code}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">规格名称</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.spec_name}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">原价</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.base_price}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">商品编码</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.goods_code}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">商品名称</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.goods_name}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">预计到货日期</view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.expecte_date}}</view> </view> <view class="pop-view"> <view class="pop-one"> <view class="pop-t">折扣率 </view> <view class="pop-m">: </view> </view> <view class="pop-n">{{item.discount_rate}}</view> </view> </view> </scroll-view> <view class="rule-box-close solid-top" @tap.stop="handleClose"> 关闭 </view> </view> </fu-popup> <!-- 日历弹框 start --> <fu-popup v-model="isShow" mode="center" border-radius="16" :mask-close-able="true" @close="closePopup"> <view class="calendar-box"> <view class="calendar-wrap"> <view class="calendar-title height-100 flex justify-center align-center"> <view class="calendar-title-prev text-333" @click="prevMonth"><text class="cuIcon-playfill"></text></view> <view class="calendar-title-data text-333">{{ currentDate[0] }}{{i18n[&#39;年&#39;]}}{{ currentDate[1] }}{{i18n[&#39;月&#39;]}}</view> <view class="calendar-title-next text-333" @click="nextMonth"><text class="cuIcon-playfill"></text></view> </view> <view class="flex justify-between align-center text-center text-333 text-df height-76"> <view class="calendar-item">{{i18n[&#39;日&#39;]}}</view> <view class="calendar-item">{{i18n[&#39;一&#39;]}}</view> <view class="calendar-item">{{i18n[&#39;二&#39;]}}</view> <view class="calendar-item">{{i18n[&#39;三&#39;]}}</view> <view class="calendar-item">{{i18n[&#39;四&#39;]}}</view> <view class="calendar-item">{{i18n[&#39;五&#39;]}}</view> <view class="calendar-item">{{i18n[&#39;六&#39;]}}</view> </view> <view class="flex justify-between align-center flex-wrap text-center text-333 text-df calendar-content" > <block > <view class="height-76 calendar-item flex justify-center align-center" v-for="(item,index) in calendar" :key="index" @click="chooseTime(item)"> <view class="calendar-item-num round" :class="{&#39;not&#39;:item.isNot,&#39;active&#39;:item.active}"> {{item.day}} </view> </view> </block> </view> </view> </view> </fu-popup> <zero-back-top iconType=&#39;triangle-text&#39; color="#ffffff" backgroundColor=&#39;#6caaff99&#39; :scrollTop=&#39;scrollTop&#39;></zero-back-top> <!-- 断网检测组件 --> <fu-notwork></fu-notwork> </view> </template> <script> import calendar from &#39;@/common/mixin/calendar.js&#39;; export default { mixins: [calendar], components: { }, data() { return { right: 50, bottom: 100, scrollTop:0, STATIC_URL:&#39;/static/&#39;, timer: null, // 定时器 type: 1, // 悬浮按钮状态 1 页码 2 返回顶部 isShow: false, //是否显示按钮 totalSize: 0, // 悬浮按钮总页码 currentPage: 1, // 当前页页码 isShowLoading: true, // 是否显示loading keywords: &#39;&#39;, // 搜索的文本 placeholder: &#39;交易编号&#39;, // 默认文本 gkeywords: &#39;&#39;, // 搜索的文本 gplaceholder: &#39;商品关键字/商家编码/条形码&#39;, // 默认文本 model: &#39;block&#39;, // 布局样式 lists: [], // 结果列表 cid: &#39;&#39;, // 分类id(点击分类跳转过来必传) isInit: false, // 是否请求过数据 status: &#39;more&#39;, // 加载状态 page: 1, // 页数 size: 10, // 页条数 sorts: &#39;1&#39;, // 条件 order: &#39;asc&#39;, // 排序 asc: 正序 desc: 倒序 flag:false, advancedSearch: null, // 高级搜索对象 pop_good_name:&#39;&#39;, caigouDetail:[], xqpop:false, isShow:false,//日历弹框 startTime:&#39;&#39;,//记录用户点击日历时的开始时间 endTime:&#39;&#39;,//记录用户点击日历时的结束时间 }; }, onLoad(options) { /*** * @keyWords 关键词 * @cid 分类id **/ const { keyWords = &#39;&#39;} = options; if (keyWords) { this.keywords = keyWords; } this.handleSearch(); // 搜索方法 }, onPullDownRefresh() { this.page = 1; this.status = &#39;more&#39;; this.lists = []; this.handleSearch(); }, onReachBottom() { this.handleSearch(); // 搜索方法 }, methods: { onPageScroll(e) { this.scrollTop = e.scrollTop; }, showCalendar(){ this.isShow=true }, handleClose() { this.xqpop = false; }, detail(item){ // console.log(item) uni.showLoading() if(!item.id){ this.$message.info(&#39;参数有误&#39;) return false } var _url = &#39;/v1/purchase/order/&#39;+item.id; this.$api.get(_url).then(res => { console.log(res,&#39;caigou detail&#39;) if (res.statusCode == 200) { this.caigouDetail = res.data.data.detail uni.hideLoading() this.xqpop = true } }) }, /** * @description 切换搜索条件 * @param {Object} e input框事件源 */ searchConfirm(e,type) { if(type == 1){ if (this.keywords.trim() == &#39;&#39;) { // this.$message.info(this.i18n[&#39;请输入要搜索的内容&#39;]); // return; } }else{ if (e && e.detail.value.trim() == &#39;&#39;) { // this.$message.info(this.i18n[&#39;请输入要搜索的内容&#39;]); // return; } } // this.cid = 0; this.page = 1; this.status = &#39;more&#39;; this.handleSearch(); uni.hideKeyboard(); }, /** * @func 搜索 */ handleSearch() { console.log(this.status) if (this.status != &#39;more&#39;) return; this.status = &#39;loading&#39;; let data = { // type: 7, // sort: this.sorts, // order: this.order, page: this.page, per_page: this.size, // goods_cid: this.cid, }; // 判断关键字或者placeholder内容 if (this.keywords.trim()) { data.bill_code = this.keywords; } if (this.gkeywords.trim()) { data.goods_keywords = this.gkeywords; } if (this.page == 1) { this.isShowLoading = true; } if(this.startTime && this.endTime){ data.bill_date = this.startTime+&#39; - &#39;+this.endTime } // 获取商品列表接口 this.$api.get(&#39;/v1/purchase/order&#39;,data).then(res => { console.log(res,&#39;goods&#39;) this.isShowLoading = false; if (res.statusCode == 200) { let totalSize = res.data.meta.total; this.totalSize = Math.ceil(totalSize / this.size); // 悬浮按钮总页码 this.currentPage = this.page; //悬浮当前页面 let list = res.data.data; if (this.page == 1) this.lists = []; this.lists = this.lists.concat(list); if (this.lists.length >= totalSize) { this.status = &#39;noMore&#39;; } else { this.status = &#39;more&#39;; this.page++; } this.isInit = true; this.flag = true } else { this.$message.error(res.errMsg); } }) .catch(err => { this.isShowLoading = false; }); }, // 清除关键字 handleClear() { this.keywords = &#39;&#39;; this.page = 1; this.status = &#39;more&#39;; this.advancedSearch = false; this.handleSearch(); uni.hideKeyboard(); }, ghandleClear() { this.gkeywords = &#39;&#39;; this.page = 1; this.status = &#39;more&#39;; this.advancedSearch = false; this.handleSearch(); uni.hideKeyboard(); }, handleScan() { let that = this; uni.scanCode({ scanType: ["barCode"], success: function(response) { console.log(response); that.gkeywords = response.result that.page = 1; that.status = &#39;more&#39;; that.lists = []; that.handleSearch(); uni.hideKeyboard(); }, fail: function(err) { that.$message.info(&#39;未能识别&#39;) console.log(err); } }); }, // 返回 back() { uni.navigateBack(); }, /** * @description 处理日历的钩子 * @param {Object} arr 入参 日历数组 */ handleCalendarFn(arr){ // 日历暂开时,显示全部日历 日历收起时 显示已经选择的日期 默认当前日期 arr.forEach(val=>{ if(val.formData == this.start_time){ val.active = true; } if(val.formData == this.end_time){ val.active = true; } }) return arr; }, /** * @description 选中日期 * @param {Object} item 入参 日历单个对象 */ chooseTime(item){ // 大于当前时间不能点击 if(new Date(item.formData).getTime() > new Date().getTime()){ return; } if(item.isNot){ return; } // 先记录本地上次筛选 uni.setStorageSync(&#39;start&#39;,this.start_time); uni.setStorageSync(&#39;end&#39;,this.end_time); this.start_time = &#39;&#39;; this.end_time = &#39;&#39;; if(!this.startTime && !this.endTime){ console.log(1) this.startTime = item.formData; }else if(this.startTime && !this.endTime){ console.log(2) this.endTime = item.formData; } this.calendar.forEach(val=>{ val.active = false; if((val.formData == this.startTime && !val.isNot) || val.formData == this.endTime && !val.isNot){ val.active = true; } }) if(this.startTime && this.endTime){ console.log(3) this.isShow = false; } }, /** * @description 关闭日期弹窗 处理日期获取数据 */ closePopup(){ if(this.startTime && this.endTime){ if(new Date(this.startTime).getTime() < new Date(this.endTime).getTime()){ this.start_time = this.startTime; this.end_time = this.endTime; }else{ this.start_time = this.endTime; this.end_time = this.startTime; } this.page = 1; this.status = "more"; this.handleSearch(); }else{ if(uni.getStorageSync(&#39;start&#39;) && uni.getStorageSync(&#39;end&#39;)){ this.start_time = uni.getStorageSync(&#39;start&#39;); this.end_time = uni.getStorageSync(&#39;end&#39;); } } // 无论是否进行筛选日期 日历高亮都需要重置到start_time end_time的值 this.calendar.forEach(val=>{ val.active = false; if((val.formData == this.start_time && !val.isNot) || val.formData == this.end_time && !val.isNot){ val.active = true; } }) uni.removeStorageSync(&#39;start&#39;); uni.removeStorageSync(&#39;end&#39;); this.startTime = &#39;&#39;; this.endTime = &#39;&#39;; }, } }; </script> <style lang="scss" scoped> page { height: 100%; background: #ededed; } .page { min-height: 100%; background-color: #ededed; } .list{ border-radius: 5px; width: calc(100% - 20px); margin-top: 0px; // height:calc(100vh - 100px); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); height: calc(100vh - var(--status-bar-height) - env(safe-area-inset-top) - 100px); } .box{ margin-bottom: 5px; } .tit{ width: 27%; text-align: left; font-weight: bold; } .mao{ margin-right: 5px; } .con{ color:#555; width: 73%; text-align: left; padding-left: 10px; } .sort-wrap { position: fixed; left: 0; right: 0; } .height-100 { height: 100rpx; } .block-180 { width: 180rpx; min-width: 180rpx; height: 180rpx; min-height: 180rpx; position: relative; image { width: 100%; height: 100%; border-radius: 8rpx; } .null { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8rpx; background-color: rgba(0, 0, 0, 0.45); color: #ffffff; font-size: 36rpx; text-align: center; line-height: 180rpx; } } .list-item + .list-item { border-top: 1rpx solid #eeeeee; } .overlay-animate { position: fixed; } .float-action { width: 72rpx; height: 72rpx; border-radius: 50%; // background-color: rgba(165, 165, 165, .85); position: fixed; right: 20rpx; bottom: 280rpx; z-index: 996; border: 1rpx solid #cccccc; .cuIcon-cart { color: #cccccc; } } .animate { position: fixed; border-radius: 50%; z-index: 995; transform-origin: 50% 50%; transition: transform linear 0.5s, left linear 0.5s, top cubic-bezier(0.3, -0.2, 1, 0) 0.5s !important; image { width: 100rpx; height: 100rpx; border-radius: 50%; } } // 商品卡片line .fu-goods-line { /* min-height: 570rpx; */ padding: 22rpx; border-radius: 14rpx; overflow: hidden; background-color: #ffffff; margin-top: 20rpx; display: flex; .block-246 { width: 172rpx; height: 172rpx; border-radius: 6rpx; background-color: #eeeeee; image { width: 100%; height: 100%; border-radius: 6rpx; } } .content { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } } .kc{ color: #fff; background: #6caaff; width: 90px; height: 30px; border-radius: 30px; text-align: center; line-height: 30px; font-size: 12px; } // 标题栏 start .nav_title{ font-size: 36rpx; font-weight: 500; color: #333333; image{ width:33rpx; height:32rpx; } } .nav { position:fixed; z-index: 999; margin-bottom: 20upx; } .nav .cu-item{ font-size: 32rpx; font-weight: 400; color: #333333; position: relative; .active-line{ position: absolute; bottom: 14rpx; left: 50%; transform: translateX(-50%); display: none; width: 24rpx; height: 4rpx; background: linear-gradient(270deg, #F04E58 0%, #F04E58 100%); opacity: 1; border-radius: 6rpx; } } .nav .cu-item.cur { color: #FF6464; font-weight: 500; border-bottom: 0!important; .active-line{ display: block; } } .nav .cu-item.cur::after { content: &#39;&#39;; display: none; } .order-item { display: flex; flex-direction: column; padding-left: 30upx; background: #fff; margin: 2upx 0upx 0 0upx; // border-radius: 16rpx; .content_bottom{ font-size: 24rpx !important; font-family: PingFang SC; color: #999999; } .i-top { display: flex; align-items: center; height: 150upx; line-height: 150upx; padding-right: 30upx; font-size: 28rpx; color: #333333; position: relative; .content{ view{ height: 50rpx; line-height: 50rpx; } .content_left{ font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: #333333; padding-right:6rpx; } .content_right{ font-size: 32rpx; font-family: Oswald; font-weight: 400; // color: #FA2033; } } } } // 订单列表 end // 日历弹框 start .calendar-box{ background: #FFFFFF; width: 640rpx; height: 560rpx; padding:0 24rpx; .calendar-wrap { .height-76 { height: 60rpx; } .calendar-title-prev { padding: 0 24rpx; transform: rotate(-180deg); box-sizing: border-box; } .calendar-title-next { padding: 0 24rpx; box-sizing: border-box; } .calendar-content{ transition: all .3s ease; overflow: hidden; } .calendar-item{ width: calc(100% / 7); .calendar-item-num{ width: 56rpx; height: 56rpx; line-height: 56rpx; &.not{ color: #BFBFBF; } &.active{ background: #6caaff; color: #FFFFFF; } } } .calendar-close{ height: 48rpx; position: relative; &::after{ content: &#39;&#39;; position: absolute; top: 50%; left: 0; width: 100%; height: 1rpx; background: #EEEEEE; transform: scaleY(0.5); } .calendar-close-btn{ width: 48rpx; height: 48rpx; line-height: 48rpx; background: #FF6464; // transform: rotate(90deg); position: relative; z-index: 1; } } } } // 日历弹框 end </style> 这是一个小程序页面 我希望上面的商品关键字 那一个搜索框 固定在那里 然后下方内容 是一个scorll-view 现在有点样式问题 就是滑动到底部的时候 搜索框被移动上面去了 应该是高度超出了 帮我在我的代码上修改 提供完整代码
08-07
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值