微信小程序共享元素+ page-container假页实现弹出效果

1.实现效果

2.实现原理

page-container

page-container
小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

tip: 当前页面最多只有 1 个容器，若已存在容器的情况下，无法增加新的容器。
tip: wx.navigateBack 无法在页面栈顶调用，此时没有上一级页面示例代码。
eg：

<page-container show="{{show}}" round="{{round}}" overlay="{{overlay}}" duration="{{duration}}" position="{{position}}" close-on-slide-down="{{false}}" bindbeforeenter="onBeforeEnter" bindenter="onEnter" bindafterenter="onAfterEnter" bindbeforeleave="onBeforeLeave" bindleave="onLeave" bindafterleave="onAfterLeave" bindclickoverlay="onClickOverlay" custom-style="{{customStyle}}" overlay-style="{{overlayStyle}}">
</page-container>

share-element
共享元素是一种动画形式，类似于 flutter Hero动画，表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。
使用时需在当前页放置 share-element 组件，同时在 page-container 容器中放置对应的 share-element 组件，对应关系通过属性值 key 映射。当设置 page-container 显示时，transform 属性为 true 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。

 <share-element class="avatar" duration="{{duration}}" key="avatar" transform><image style="width: 40px;border-radius: 50%;" mode="widthFix" src="{{contact.img}}" /></share-element><share-element class="name" key="name" duration="{{duration}}" transform>{{contact.name}}</share-element>

key值映射：

page-container中的share-element相绑定。

3.缩放效果

实现一个缩放效果，将元素大小放到share-element标签上。

4.实现代码

<view><view class="screen screen1"><block wx:for="{{contacts}}" wx:key="id" wx:for-item="contact"><view class="contact" bindtap="showNext" data-idx="{{index}}"><share-element class="avatar" key="avatar" duration="{{duration}}" transform="{{transformIdx === index}}"><image mode="widthFix" src="{{contact.img}}"></image></share-element><share-element duration="{{duration}}" class="name" key="name" transform="{{transformIdx === index}}">{{contact.name}}</share-element><view class="list"><view>手机号: {{contact.phone}}</view><view>邮箱: {{contact.email}}</view></view></view></block></view>
</view>
<page-container show="{{show}}" overlay="{{overlay}}" close-on-slide-down duration="{{duration}}" position="{{position}}" bindbeforeenter="onBeforeEnter" bindenter="onEnter" bindafterenter="onAfterEnter" bindbeforeleave="onBeforeLeave" bindleave="onLeave" bindafterleave="onAfterLeave" bindclickoverlay="onClickOverlay"><view class="screen screen2"><view class="contact"><share-element class="avatar ava_pa" duration="{{duration}}" key="avatar" transform><image mode="widthFix" src="{{contact.img}}" /></share-element><share-element class="name" key="name" duration="{{duration}}" transform>{{contact.name}}</share-element><view class="paragraph {{show ? 'enter' : ''}}">共享元素是一种动画形式，类似于 flutter Hero动画，表现为元素像是在页面间穿越一样。该组件需与 page-container 组件结合使用。使用时需在当前页放置 share-element 组件，同时在 page-container 容器中放置对应的 share-element 组件，对应关系通过属性值 key 映射。当设置 page-container 显示时，transform 属性为 true 的共享元素会产生动画。当前页面容器退出时，会产生返回动画。<view></view>小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。</view><button class="screen2-button" bindtap="showPrev" hidden="{{!show}}" hover-class="none">Click Me</button></view></view>
</page-container>

/* pages/jsCase/pageCon/index.wxss */
page {color           : #333;background-color: #fff;overflow        : hidden;
}button {border-radius     : 60rpx;border            : 0 solid orange;background-color  : orange;color             : #fff;font-size         : 120%;padding           : 8px 16px;outline-width     : 0;-webkit-appearance: none;box-shadow        : 0 8px 17px rgba(0, 0, 0, 0.2);
}.screen {position                  : absolute;top                       : 0;bottom                    : 0;left                      : 0;right                     : 0;padding                   : 16px;-webkit-overflow-scrolling: touch;
}.contact {position        : relative;padding         : 16px;background-color: #fff;width           : 100%;height          : 100%;box-sizing      : border-box;
}.avatar {position     : absolute;top          : 16px;left         : 16px;font-size    : 0;border-radius: 50%;width        : 160rpx;height       : 160rpx;overflow     : hidden;
}.avatar image {width : 100%;height: 100%;
}.ava_pa {width : 80rpx;height: 80rpx;
}.ava_pa image {width : 100%;height: 100%;
}.name {height     : 65px;font-size  : 2em;font-weight: bold;text-align : center;margin     : 10px 0;
}.list {padding-top : 8px;padding-left: 32px;
}.screen1 {overflow-y: scroll;padding   : 0;
}.screen1 .contact {margin       : 16px;height       : auto;width        : auto;box-shadow   : 0 2px 5px 0 rgba(0, 0, 0, 0.2);border-radius: 20rpx;overflow     : hidden;
}.screen2-button {display: block;margin : 24px auto;
}.paragraph {-webkit-transition: transform ease-in-out 300ms;transition        : transform ease-in-out 300ms;-webkit-transform : scale(0.6);transform         : scale(0.6);color             : #999;font-size         : 27rpx;
}.enter.paragraph {transform: none;
}

Page({/*** 页面的初始数据*/data: {contacts: [{id: 1,name: 'susu1',img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',phone: '0101 123456',mobile: '0770 123456',email: 'frank@emailionicsorter.com'},{id: 2,name: 'susu2',img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',phone: '0101 123456',mobile: '0770 123456',email: 'frank@emailionicsorter.com'},{id: 3,name: 'susu3',img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',phone: '0101 123456',mobile: '0770 123456',email: 'frank@emailionicsorter.com'},{id: 4,name: 'susu4',img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',phone: '0101 123456',mobile: '0770 123456',email: 'frank@emailionicsorter.com'},{id: 5,name: 'susu5',img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',phone: '0101 123456',mobile: '0770 123456',email: 'frank@emailionicsorter.com'},{id: 6,name: 'susu6',img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',phone: '0101 123456',mobile: '0770 123456',email: 'frank@emailionicsorter.com'},{id: 7,name: 'susu7',img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',phone: '0101 123456',mobile: '0770 123456',email: 'frank@emailionicsorter.com'},{id: 8,name: 'susu8',img: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg',phone: '0101 123456',mobile: '0770 123456',email: 'frank@emailionicsorter.com'}],contact: {},transformIdx: 0,position: 'center',duration: 300,show: false,overlay: false},onLoad: function (options) {this.setData({contact: this.data.contacts[0]})},showNext(e) {const idx = e.currentTarget.dataset.idx;this.setData({show: true,contact: this.data.contacts[idx],transformIdx: idx})},showPrev() {this.setData({show: false})},onBeforeEnter(res) {console.log(res)},onEnter(res) {console.log(res)},onAfterEnter(res) {console.log(res)},onBeforeLeave(res) {console.log(res)},onLeave(res) {console.log(res)},onAfterLeave(res) {console.log(res)},
})

5更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序共享元素+ page-container假页实现弹出效果相关推荐

微信小程序删除文件Page剩余
微信小程序删除文件Page剩余问题对于文件夹无法通过右键将文件夹及其包含Page删除. 手动一一删除后重新编译, 会自动生成该文件的WXML页面与JavaScript页面, 无法删除. 解决删除 ...
微信小程序中的Page
微信小程序中的Page Page()定义在js文件中,Page() 函数用来注册一个页面. Page()函数接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. obje ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
微信小程序电商项目商品详情页开发实战之数据绑定与事件应用
各位CSDN的朋友,我们都知道,现在微信小程序电商平台特别火爆,所以我将以一个生鲜电商项目为例,为大家讲述微信小程序的实战化开发,价值几万元的成熟项目,你可千万不要错过哦. 大家直接通过视频链接直接看 ...
微信小程序-实现元素渐入渐出动画效果-封装方法
开端之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只 ...
微信小程序样式-元素选择器的使用
微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua CSS 元素选择器最常见的 CSS 选择器是元素 ...
《八》微信小程序中的 Page
注册页面: Page(): 用来创建小程序中的一个页面.接受一个 Object 类型参数,其指定页面的初始数据.生命周期函数.事件处理函数等. Object 参数: data:页面第一次渲染使用的初始 ...
微信小程序页面元素如何保存成图片
微信小程序没有将view,image,text等标签直接生成图片的api.但是有将canvas直接生成图片的api 将canvas标签生成图片的api--------------------- wx. ...
计算机毕业设计微信小程序共享雨伞租借系统
文章目录 0 项目说明 1 简介 2 功能模块 3 关于登录与注册 4 页面展示 5 页面目录 0 项目说明基于微信小程序的共享雨伞租借系统提示:适合用于课程设计或毕业设计,工作量达标,源码开放 ...

微信小程序共享元素+ page-container假页实现弹出效果

1.实现效果

2.实现原理

3.缩放效果

4.实现代码

5更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序共享元素+ page-container假页实现弹出效果相关推荐

最新文章

热门文章