在培训考试小程序页面弹出半屏的弹窗交互实践

如果在页面内进行复杂的界面设计(如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等),用户进行返回操作会直接离开当前页面,不符合用户预期,预期应为关闭当前弹出的组件。

为此提供"假页"容器组件page-container,效果类似于 popup 弹出层,页面内存在该容器时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用 navigateBack 接口。

我在搭建培训考试小程序的首页里面使用page-container组件,当需要切换题库的时候,让题库列表组件从这个页面的底部划出来然后再取消,或者是完成切换题库的时候调用close方法将半屏的假页面进行关掉。

完成以后,这个页面效果大概是像这样。这样的交互设计,大大地提升了答题应用程序的用户体验。

那么,如何使用页面容器组件?

这个页面容器组件page-container,它是一个标准组件,它不需要引入就可以使用了。

这个是组件的wxml代码,其中里面有一个position属性它是控制面板从底部划出的。它的show属性控制面板是否显示。

这个节点的tap事件绑定到了这个close方法之上,无论是单击到哪一个地方close方法都是会被调用的,它是用于关闭我们当前的题库列表面板了。

复制代码
<page-container   show="{{show}}"  round="{{round}}"  overlay="{{overlay}}"  duration="{{duration}}"  position="{{position}}"  close-on-slide-down="{{false}}"  bindafterenter="onAfterEnter"  bindafterleave="onAfterLeave"  bindclickoverlay="onClickOverlay"  custom-style="{{customStyle}}"  overlay-style="{{overlayStyle}}">  <view class="detail-page">    <button type="primary" bindtap="close">推出</button>  </view></page-container>

这个是组件的JS代码,在这个方法close里边先尝试使用了wx.navigateBack然后进行退出。

如果当前小程序页面栈里面它有页面调用会成功,反之如果是当前这个页面它是启动页或者是当前这个页面前面它没有页面了则会调用失败。

在调用失败的时候也没有关系,可以再尝试使用setData改变数据属性visible,然后以此来关闭我们的一个面板。

​​​​​​​​​​​​​​

复制代码
close() {    this.setData({show: false})    // wx.navigateBack()}

属性说明如下:

当然,由于题库列表较长,超出了可视区域,所以我还在组件page-container中结合使用scroll-view实现了滚动。

刚开始遇到一个小插曲,在page-container内部实现垂直滚动,一直不成功。

后来经排查,原来,可滚动视图区域,使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height,或者直接在scroll-view加一个max-height。

相关推荐
2501_916007477 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
czhc114007566311 小时前
Linux925 shell 变量:本地、环境变量、全局变量;数组:普通数组、关联数组;交互定义、basename、dirname
linux·交互
2501_9160088912 小时前
HTTPS 双向认证抓包实战,原理、难点、工具与可操作的排查流程
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9151063212 小时前
HTTPS 能抓包吗?实战答案与逐步可行方案(HTTPS 抓包原理、证书Pinning双向认证应对、工具对比)
网络协议·http·ios·小程序·https·uni-app·iphone
游戏开发爱好者812 小时前
App HTTPS 抓包实战,原理、常见问题与可行工具路线(开发 测试 安全 角度)
网络协议·安全·ios·小程序·https·uni-app·iphone
2501_9151063212 小时前
App HTTPS 抓包实战指南,原理、常见阻碍、逐步排查与工具组合
网络协议·http·ios·小程序·https·uni-app·iphone
Roye_ack14 小时前
【项目实战 Day7】springboot + vue 苍穹外卖系统(微信小程序 + 微信登录模块 完结)
spring boot·redis·后端·小程序·个人开发·学习方法·苍穹外卖
weixin_lynhgworld15 小时前
短剧小程序系统开发:引领影视行业数字化转型浪潮
大数据·小程序
流***陌16 小时前
一键预约上门服务:到家洗车小程序的便捷功能与场景化体验
小程序
说私域16 小时前
整合与超越:论“开源AI智能名片链动2+1模式S2B2C商城小程序”对传统红人直播带货模式的升维
人工智能·小程序