miniprogram-demo/pages/component/share-element/share-element.wxml

58 lines
2.3 KiB
Plaintext

<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 style="width: 40px;" mode="widthFix" src="/image/{{contact.img}}"></image>
</share-element>
<share-element duration="{{duration}}" class="name" key="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>
</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" duration="{{duration}}" key="avatar" transform>
<image style="width: 40px;" mode="widthFix" src="/image/{{contact.img}}" />
</share-element>
<share-element class="name" key="name" duration="{{duration}}" transform>
{{contact.name}}
</share-element>
<view class="paragraph {{show ? 'enter' : ''}}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nisl enim, sodales non augue efficitur, sagittis
varius neque. Fusce dolor turpis, maximus eu volutpat quis, pellentesque et ligula. Ut vehicula metus in nibh
mollis ornare. Etiam aliquam lacinia malesuada. Vestibulum dignissim mollis quam a tristique. Maecenas neque
mauris, malesuada vitae magna eu, congue consectetur risus. Etiam vitae pulvinar ex. Maecenas suscipit mi ac
imperdiet pretium. Aliquam velit mauris, euismod quis elementum sed, malesuada non dui. Nunc rutrum sagittis
ligula in dapibus. Cras suscipit ut augue eget mollis. Donec auctor feugiat ipsum id viverra. Vestibulum eu nisi
risus. Vestibulum eleifend dignissim.
</view>
<button class="screen2-button" bindtap="showPrev" hidden="{{!show}}" hover-class="none">Click Me</button>
</view>
</view>
</page-container>