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

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

为此提供"假页"容器组件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_915921431 小时前
iOS混淆工具实战 在线教育直播类 App 的课程与互动安全防护
android·安全·ios·小程序·uni-app·iphone·webview
流***陌2 小时前
医疗问诊陪诊小程序:以人性化设计构建健康服务新生态
小程序
emojiwoo4 小时前
前端视觉交互设计全解析:从悬停高亮到多维交互体系(含代码 + 图表)
前端·交互
说私域4 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的公益课引流策略研究
人工智能·小程序·开源
2501_915106325 小时前
Charles抓包工具在接口性能优化与压力测试中的实用方法
ios·性能优化·小程序·https·uni-app·压力测试·webview
weixin_472183547 小时前
微信小程序预览和分享文件
微信小程序·小程序
墨霁青玉7 小时前
微信小程序一个页面同时存在input和textarea,bindkeyboardheightchange相互影响
微信小程序·小程序
万岳科技程序员小金10 小时前
餐饮、跑腿、零售多场景下的同城外卖系统源码扩展方案
人工智能·小程序·软件开发·app开发·同城外卖系统源码·外卖小程序·外卖app开发
安卓开发者17 小时前
鸿蒙NEXT交互机制解析:从输入设备到手势响应的全面指南
microsoft·交互·harmonyos
毕设源码-邱学长17 小时前
【开题答辩全过程】以 小众商户小程序为例,包含答辩的问题和答案
小程序