Popup custom view on current view

本文介绍了一种在iOS应用中创建自定义对话框的方法,利用UIViewController实现覆盖当前上下文的透明背景视图,并展示了如何调整视图控制器的过渡样式以平滑地呈现对话框。

很多时候需要在原视图上弹出一个自定义视图让用户确认一些东西. 通常的做法一般使用UIAlertView/UIAlertController. 但是做为自定义它们的风格可能与app不符.


思路如下:

1) 创建一个UIViewController,背景是一个UIImageView,Autolayout至全屏,图片选用半透明的,目标是为了显示前一页的部分内容

2) 通过presentViewController:animated:completion:来弹出视图

3) 注意弹出的视图的背景颜色要改成clearColor,否则无法透明


    viewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;

    if ([NSProcessInfo instancesRespondToSelector:@selector(isOperatingSystemAtLeastVersion:)]){

        viewController.providesPresentationContextTransitionStyle = YES;

        viewController.definesPresentationContext = YES;

        [viewController setModalPresentationStyle:UIModalPresentationOverCurrentContext];

    }

    else{

        [self setModalPresentationStyle:UIModalPresentationCurrentContext];

        [self.navigationController setModalPresentationStyle:UIModalPresentationCurrentContext];

    }

    [self presentViewController:viewController animated:YES completion:nil];


参考图:


onReachBottom触底函数用这个但是无法保证搜索框和u-tabs标签页是吸顶的,该怎么解决?<template> <view class="deliveryOrder"> <u-toast ref="uToast"></u-toast> <view class="searchBtn"> <u-search placeholder="订单号" :showAction="true" v-model="orderValue" shape="round" actionText="查询" :animation="true" @search="searchClick()" @custom="searchClick()"></u-search> <text class="screening" @click="handleScreening">筛选</text> </view> <view class="tabsBox"> <u-sticky bgColor="#fff"> <u-tabs :list="list" :is-scroll="false" :current="current" bar-width="50" active-color="orange" @change="change"> </u-tabs> <view v-if="current===0"> <scroll-view @scrolltolower="lowerBottom" @refresherrefresh="getFresh" :refresher-enabled="true" :refresher-triggered="triggered" scroll-y="true" class="scrollHeight"> <view class="scrolllist" v-if="allList&&allList.length>0"> <view class="orderscrollItem" v-for="(item,index) in allList" :key="index" @click="toDetail(item)"> <view class="itemTitle"> {{item}} </view> </view> <view class="more_text" v-if="showMoreData"> 没有更多数据了... </view> </view> <view v-else class="empty_box"> <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/car.png" > </u-empty> </view> </scroll-view> </view> <view v-if="current===1"> 待配送 </view> <view v-if="current===2"> 配送中 </view> <view v-if="current===3"> 待签收 </view> <view v-if="current===4"> 已完成 </view> </u-sticky> </view> <u-popup :show="showPopup" :round="10" mode="top" @close="showPopup=false"> <view class="popup"> <text class="popupTitle">筛选条件</text> <view class="formBox"> <u--form :model="form" ref="uForm" labelWidth="90px"> <u-form-item label="时间范围" prop="timeValue" borderBottom @click="showCalendar=true"> <u-input v-model="form.timeValue" :disabled="true" r
03-28
<template> <view class="page"> <!-- 头部 start --> <view class="cu-custom bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]"> <view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]"> <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 + 'px'}"> <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 + 'integral_sao.png'" 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['年']}}{{ currentDate[1] }}{{i18n['月']}}</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['日']}}</view> <view class="calendar-item">{{i18n['一']}}</view> <view class="calendar-item">{{i18n['二']}}</view> <view class="calendar-item">{{i18n['三']}}</view> <view class="calendar-item">{{i18n['四']}}</view> <view class="calendar-item">{{i18n['五']}}</view> <view class="calendar-item">{{i18n['六']}}</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="{'not':item.isNot,'active':item.active}"> {{item.day}} </view> </view> </block> </view> </view> </view> </fu-popup> <zero-back-top iconType='triangle-text' color="#ffffff" backgroundColor='#6caaff99' :scrollTop='scrollTop'></zero-back-top> <!-- 断网检测组件 --> <fu-notwork></fu-notwork> </view> </template> <script> import calendar from '@/common/mixin/calendar.js'; export default { mixins: [calendar], components: { }, data() { return { right: 50, bottom: 100, scrollTop:0, STATIC_URL:'/static/', timer: null, // 定时器 type: 1, // 悬浮按钮状态 1 页码 2 返回顶部 isShow: false, //是否显示按钮 totalSize: 0, // 悬浮按钮总页码 currentPage: 1, // 当前页页码 isShowLoading: true, // 是否显示loading keywords: '', // 搜索的文本 placeholder: '交易编号', // 默认文本 gkeywords: '', // 搜索的文本 gplaceholder: '商品关键字/商家编码/条形码', // 默认文本 model: 'block', // 布局样式 lists: [], // 结果列表 cid: '', // 分类id(点击分类跳转过来必传) isInit: false, // 是否请求过数据 status: 'more', // 加载状态 page: 1, // 页数 size: 10, // 页条数 sorts: '1', // 条件 order: 'asc', // 排序 asc: 正序 desc: 倒序 flag:false, advancedSearch: null, // 高级搜索对象 pop_good_name:'', caigouDetail:[], xqpop:false, isShow:false,//日历弹框 startTime:'',//记录用户点击日历时的开始时间 endTime:'',//记录用户点击日历时的结束时间 }; }, onLoad(options) { /*** * @keyWords 关键词 * @cid 分类id **/ const { keyWords = ''} = options; if (keyWords) { this.keywords = keyWords; } this.handleSearch(); // 搜索方法 }, onPullDownRefresh() { this.page = 1; this.status = 'more'; 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('参数有误') return false } var _url = '/v1/purchase/order/'+item.id; this.$api.get(_url).then(res => { console.log(res,'caigou detail') 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() == '') { // this.$message.info(this.i18n['请输入要搜索的内容']); // return; } }else{ if (e && e.detail.value.trim() == '') { // this.$message.info(this.i18n['请输入要搜索的内容']); // return; } } // this.cid = 0; this.page = 1; this.status = 'more'; this.handleSearch(); uni.hideKeyboard(); }, /** * @func 搜索 */ handleSearch() { console.log(this.status) if (this.status != 'more') return; this.status = 'loading'; 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+' - '+this.endTime } // 获取商品列表接口 this.$api.get('/v1/purchase/order',data).then(res => { console.log(res,'goods') 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 = 'noMore'; } else { this.status = 'more'; this.page++; } this.isInit = true; this.flag = true } else { this.$message.error(res.errMsg); } }) .catch(err => { this.isShowLoading = false; }); }, // 清除关键字 handleClear() { this.keywords = ''; this.page = 1; this.status = 'more'; this.advancedSearch = false; this.handleSearch(); uni.hideKeyboard(); }, ghandleClear() { this.gkeywords = ''; this.page = 1; this.status = 'more'; 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 = 'more'; that.lists = []; that.handleSearch(); uni.hideKeyboard(); }, fail: function(err) { that.$message.info('未能识别') 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('start',this.start_time); uni.setStorageSync('end',this.end_time); this.start_time = ''; this.end_time = ''; 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('start') && uni.getStorageSync('end')){ this.start_time = uni.getStorageSync('start'); this.end_time = uni.getStorageSync('end'); } } // 无论是否进行筛选日期 日历高亮都需要重置到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('start'); uni.removeStorageSync('end'); this.startTime = ''; this.endTime = ''; }, } }; </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: ''; 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: ''; 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
/* * Copyright (C) 2010 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ package android.widget; import android.annotation.MenuRes; import android.annotation.TestApi; import android.compat.annotation.UnsupportedAppUsage; import android.content.Context; import android.os.Build; import android.view.Gravity; import android.view.Menu; import android.view.MenuInflater; import android.view.MenuItem; import android.view.View; import android.view.View.OnTouchListener; import com.android.internal.R; import com.android.internal.view.menu.MenuBuilder; import com.android.internal.view.menu.MenuPopupHelper; import com.android.internal.view.menu.ShowableListMenu; /** * A PopupMenu displays a {@link Menu} in a modal popup window anchored to a * {@link View}. The popup will appear below the anchor view if there is room, * or above it if there is not. If the IME is visible the popup will not * overlap it until it is touched. Touching outside of the popup will dismiss * it. */ public class PopupMenu { @UnsupportedAppUsage(maxTargetSdk = Build.VERSION_CODES.R, trackingBug = 170729553) private final Context mContext; private final MenuBuilder mMenu; private final View mAnchor; @UnsupportedAppUsage private final MenuPopupHelper mPopup; private OnMenuItemClickListener mMenuItemClickListener; private OnDismissListener mOnDismissListener; private OnTouchListener mDragListener; /** * Constructor to create a new popup menu with an anchor view. * * @param context Context the popup menu is running in, through which it * can access the current theme, resources, etc. * @param anchor Anchor view for this popup. The popup will appear below * the anchor if there is room, or above it if there is not. */ public PopupMenu(Context context, View anchor) { this(context, anchor, Gravity.NO_GRAVITY); } /** * Constructor to create a new popup menu with an anchor view and alignment * gravity. * * @param context Context the popup menu is running in, through which it * can access the current theme, resources, etc. * @param anchor Anchor view for this popup. The popup will appear below * the anchor if there is room, or above it if there is not. * @param gravity The {@link Gravity} value for aligning the popup with its * anchor. */ public PopupMenu(Context context, View anchor, int gravity) { this(context, anchor, gravity, R.attr.popupMenuStyle, 0); } /** * Constructor a create a new popup menu with a specific style. * * @param context Context the popup menu is running in, through which it * can access the current theme, resources, etc. * @param anchor Anchor view for this popup. The popup will appear below * the anchor if there is room, or above it if there is not. * @param gravity The {@link Gravity} value for aligning the popup with its * anchor. * @param popupStyleAttr An attribute in the current theme that contains a * reference to a style resource that supplies default values for * the popup window. Can be 0 to not look for defaults. * @param popupStyleRes A resource identifier of a style resource that * supplies default values for the popup window, used only if * popupStyleAttr is 0 or can not be found in the theme. Can be 0 * to not look for defaults. */ public PopupMenu(Context context, View anchor, int gravity, int popupStyleAttr, int popupStyleRes) { mContext = context; mAnchor = anchor; mMenu = new MenuBuilder(context); mMenu.setCallback(new MenuBuilder.Callback() { @Override public boolean onMenuItemSelected(MenuBuilder menu, MenuItem item) { if (mMenuItemClickListener != null) { return mMenuItemClickListener.onMenuItemClick(item); } return false; } @Override public void onMenuModeChange(MenuBuilder menu) { } }); mPopup = new MenuPopupHelper(context, mMenu, anchor, false, popupStyleAttr, popupStyleRes); mPopup.setGravity(gravity); mPopup.setOnDismissListener(new PopupWindow.OnDismissListener() { @Override public void onDismiss() { if (mOnDismissListener != null) { mOnDismissListener.onDismiss(PopupMenu.this); } } }); } /** * Sets the gravity used to align the popup window to its anchor view. * <p> * If the popup is showing, calling this method will take effect only * the next time the popup is shown. * * @param gravity the gravity used to align the popup window * @see #getGravity() */ public void setGravity(int gravity) { mPopup.setGravity(gravity); } /** * @return the gravity used to align the popup window to its anchor view * @see #setGravity(int) */ public int getGravity() { return mPopup.getGravity(); } /** * Returns an {@link OnTouchListener} that can be added to the anchor view * to implement drag-to-open behavior. * <p> * When the listener is set on a view, touching that view and dragging * outside of its bounds will open the popup window. Lifting will select * the currently touched list item. * <p> * Example usage: * <pre> * PopupMenu myPopup = new PopupMenu(context, myAnchor); * myAnchor.setOnTouchListener(myPopup.getDragToOpenListener()); * </pre> * * @return a touch listener that controls drag-to-open behavior */ public OnTouchListener getDragToOpenListener() { if (mDragListener == null) { mDragListener = new ForwardingListener(mAnchor) { @Override protected boolean onForwardingStarted() { show(); return true; } @Override protected boolean onForwardingStopped() { dismiss(); return true; } @Override public ShowableListMenu getPopup() { // This will be null until show() is called. return mPopup.getPopup(); } }; } return mDragListener; } /** * Returns the {@link Menu} associated with this popup. Populate the * returned Menu with items before calling {@link #show()}. * * @return the {@link Menu} associated with this popup * @see #show() * @see #getMenuInflater() */ public Menu getMenu() { return mMenu; } /** * @return a {@link MenuInflater} that can be used to inflate menu items * from XML into the menu returned by {@link #getMenu()} * @see #getMenu() */ public MenuInflater getMenuInflater() { return new MenuInflater(mContext); } /** * Inflate a menu resource into this PopupMenu. This is equivalent to * calling {@code popupMenu.getMenuInflater().inflate(menuRes, popupMenu.getMenu())}. * * @param menuRes Menu resource to inflate */ public void inflate(@MenuRes int menuRes) { getMenuInflater().inflate(menuRes, mMenu); } /** * Show the menu popup anchored to the view specified during construction. * * @see #dismiss() */ public void show() { mPopup.show(); } /** * Dismiss the menu popup. * * @see #show() */ public void dismiss() { mPopup.dismiss(); } /** * Sets a listener that will be notified when the user selects an item from * the menu. * * @param listener the listener to notify */ public void setOnMenuItemClickListener(OnMenuItemClickListener listener) { mMenuItemClickListener = listener; } /** * Sets a listener that will be notified when this menu is dismissed. * * @param listener the listener to notify */ public void setOnDismissListener(OnDismissListener listener) { mOnDismissListener = listener; } /** * Sets whether the popup menu's adapter is forced to show icons in the * menu item views. * <p> * Changes take effect on the next call to show(). * * @param forceShowIcon {@code true} to force icons to be shown, or * {@code false} for icons to be optionally shown */ public void setForceShowIcon(boolean forceShowIcon) { mPopup.setForceShowIcon(forceShowIcon); } /** * Interface responsible for receiving menu item click events if the items * themselves do not have individual item click listeners. */ public interface OnMenuItemClickListener { /** * This method will be invoked when a menu item is clicked if the item * itself did not already handle the event. * * @param item the menu item that was clicked * @return {@code true} if the event was handled, {@code false} * otherwise */ boolean onMenuItemClick(MenuItem item); } /** * Callback interface used to notify the application that the menu has closed. */ public interface OnDismissListener { /** * Called when the associated menu has been dismissed. * * @param menu the popup menu that was dismissed */ void onDismiss(PopupMenu menu); } /** * Returns the {@link ListView} representing the list of menu items in the currently showing * menu. * * @return The view representing the list of menu items. * @hide */ @TestApi public ListView getMenuListView() { if (!mPopup.isShowing()) { return null; } return mPopup.getPopup().getListView(); } }
06-08
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值