微信小程序开发(八):page-container弹窗与share-element动画

这篇具有很好参考价值的文章主要介绍了微信小程序开发(八):page-container弹窗与share-element动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

page-container页面容器,可以在当前页面中弹出一个半屏的弹窗、或者在页面内加载一个全屏的子页面

当page-container组件显示时,用户进行返回操作时会关闭page-container容器,而不会关闭当前页面。

每个页面最多只能显示一个page-container,如果在一个页面代码中定义了多个page-container,只有文档流中的第一个page-container能正常显示。

属性

show:是否显示page-container组件

duration:动画时长

z-index:默认100,显示在其他元素的上层

overlay:是否显示遮罩层

position:page-container弹出的位置,topbottomrightcenter,从底部或者顶部弹出时,page-container的形态是一个半屏弹窗,从右侧或者中间显示时,page-container的形态是一个全屏的子页面

round:是否显示圆角

close-on-slideDown:是否在下滑一段距离后关闭

overlay-style:自定义遮罩层的样式

custom-style:自定义弹出的page-container的样式

事件处理函数

在page-container触发、收回的这个过程中,会触发以下几个函数:
bind:beforeenter:弹出前触发
bind:enter:弹出中触发
bind:afterenter:完成弹出后触发
bind:beforeleave:收回前触发
bind:leave:收回中触发
bind:afterleave:完成收回后触发
bind:clickoverlay:点击遮罩层时触发

一个小例子验证一下这几个事件处理函数的触发顺序

在页面中定义了一个position:'top'的page-container,在弹出、收回的过程中,事件处理函数的触发顺序如下所示:

<view style="width: 100%; height:100vh; background-color: cadetblue;">
  <page-container show="{{showPage}}" overlay="{{true}}" round="{{true}}" close-on-slideDown="{{true}}"
  bind:beforeenter="beforeenter" 
  bind:enter="enter" 
  bind:afterenter="afterenter" 
  bind:beforeleave="beforeleave" 
  bind:leave="leave" 
  bind:afterleave="afterleave" 
  bind:clickoverlay="clickoverlay"> 
    <view style="height: 30vh;">
      this is page-container
    </view>
  </page-container>
  <button type="primary" style="width: 100%; position: absolute; bottom: 0; left: 0;" bindtap="tap">show page-container</button>
</view>
Page({
  data: {
    showPage: false
  },

  onLoad() {
   
  },

  tap(){
    console.log('click tap');
    this.setData({
      showPage: true
    });
  },

  beforeenter(){
    console.log('beforeenter');
  },
  enter(){
    console.log('enter');
  },
  afterenter(){
    console.log('afterenter');
  },
  beforeleave(){
    console.log('beforeleave');
  },
  leave(){
    console.log('leave');
  },
  afterleave(){
    console.log('afterleave');
  },
  clickoverlay(){
    console.log('clickoverlay');
  },
})

微信小程序开发(八):page-container弹窗与share-element动画
我点击遮罩层触发了收回page-container的事件,所以clickoverlay事件在beforeleave事件之前触发。

page-container与share-element同时使用实现元素的页面穿梭动画

share-element按照语义翻译叫做共享元素,需要和page-container组件组合使用。

在页面中和page-container中同时放置share-element元素,这两个对应的share-element通过属性值key实现对应,当page-container显示时,共享元素产生从page中的位置穿梭到page-container中的动画,当page-container关闭时,贡献元素也会产生也给返回动画文章来源地址https://www.toymoban.com/news/detail-489009.html

到了这里,关于微信小程序开发(八):page-container弹窗与share-element动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发 | 小程序开发框架

    2023年04月17日
    浏览(41)
  • 微信小程序开发教程:项目二微信小程序开发基础 课后习题

    《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一、单选题 二、多选题 三、判断题 四、填空题 五、简答题 1.请简单描述页面样式的单位rpx与px的关系。 2.简单地介绍开发常用页面组件。 六、编程题 1.请编写一个商品列表页面,展示商品名称和价格。

    2024年02月09日
    浏览(51)
  • 微信公众号开发和小程序开发

    公众号开发,需要的后端技术,是把一个后台服务注册到公众号,这样用户通过微信发给公众号的消息,都经过微信转发到后台服务了,这个后台服务要在5秒内响应,如果没有响应则触发重试机制,重试3次没有响应,连接将断开。 小程序开发需要的是前端技术,我们按照微

    2024年02月07日
    浏览(43)
  • 微信小程序开发—添加开发者

    微信公众平台 (qq.com)

    2023年04月18日
    浏览(46)
  • 微信小程序开发详解

    在本文中,我将带领大家深入探讨微信小程序开发原理和技术,包括小程序框架、组件、事件等方面。让各位小伙伴可以更好地理解小程序的开发过程和原理。 微信小程序是一种可以在微信中运行的应用程序,它使用了微信提供的开发框架和工具,可以在不需要下载安装的情

    2024年02月03日
    浏览(34)
  • 微信小程序开发限制

    大小限制: 整个小程序所有分包大小不超过8M,单个分包/主包大小不能超过2M。 嵌套H5的跳转限制: 小程序跳转的H5链接,必须是https协议,且所跳转的链接其域名服务器下必须放置校验文件(即所跳链接我们要有其服务器管理修改权限),才可在小程序中进行跳转 请求接口

    2024年02月05日
    浏览(55)
  • 微信小程序开发6

    分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。  对小程序进行分包的好处主要有以下两点: 可以优化小程序首次启动的下载时间 在多团队共同开发时可以更好的解耦协作  分包前,小程序项目

    2024年02月16日
    浏览(35)
  • 微信小程序开发5

    在自定义组件的wxml结构中,可以提供一个slot节点(插槽),用于承载组件使用者提供的wxml结构 属性绑定:用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据 事件绑定:用于子组件向父组件传递数据,可以传递任意数据 获取组件实例:父组件还可以通过this.s

    2024年02月16日
    浏览(30)
  • 微信小程序开发笔记

    详情参考: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html 详情参考: https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html 详情参考: https://developers.weixin.qq.com/miniprogram/dev/component/button.html 按钮css样式参考: https://www.runoob.com/css3/css3-buttons.html 详情参考: https://w

    2024年02月09日
    浏览(58)
  • 微信小程序开发教程:

    准备工作 下载并安装微信开发者工具 注册微信公众平台账号并创建小程序项目 项目结构 app.js:小程序的入口文件,用于定义全局变量和函数 app.json:小程序的全局配置文件,用于配置小程序的页面、窗口样式、网络超时时间等 app.wxss:小程序的全局样式表,用于定义全局的

    2024年02月22日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包