<view class="screen screen1">

<block a:for="{{contacts}}" a:key="id" a:for-item="contact">

<view class="contact" ontap="shownext" data-idx="{{index}}">

<share-element duration="{{duration}}" class="name" name="name" transform="{{transformidx === index}}">

{{contact.name}}

share-element>

<view class="list">

<view>phone: {{contact.phone}}view>

<view>mobile: {{contact.mobile}}view>

<view>email: {{contact.email}}view>

view>

view>

block>

view>

show="{{show}}"

overlay="{{overlay}}"

close-on-slide-down

duration="{{duration}}"

position="{{position}}"

onbeforeenter="onbeforeenter"

onenter="onenter"

onafterenter="onafterenter"

onbeforeleave="onbeforeleave"

onleave="onleave"

onafterleave="onafterleave"

onclickoverlay="onclickoverlay"

<view class="screen screen2">

<view class="contact">

<share-element class="name" name="name" duration="{{duration}}" transform>

{{contact.name}}

share-element>

const contacts = [

{

id: 1,

name: "frank",

phone: "0101 123456",

mobile: "0770 123456",

email: "frank@emailionicsorter.com",

},

{

id: 2,

name: "susan",

phone: "0101 123456",

mobile: "0770 123456",

email: "frank@emailionicsorter.com",

},

{

id: 3,

name: "emma",

phone: "0101 123456",

mobile: "0770 123456",

email: "frank@emailionicsorter.com",

},

{

id: 4,

name: "scott",

phone: "0101 123456",

mobile: "0770 123456",

email: "frank@emailionicsorter.com",

},

{

id: 5,

name: "bob",

phone: "0101 123456",

mobile: "0770 123456",

email: "frank@emailionicsorter.com",

},

page {

color: #333;

background-color: #ddd;

overflow: hidden;

button {

border: 0 solid #0010ae;

background-color: #1f2afe;

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;