OmniCard/mpuniapp/pages/component/share-element/share-element.uvue

<template>
  <page-head title="share-element"></page-head>
  <page-intro content="本页演示 share-element 共享元素组件：点击图片打开详情页时的转场共享效果；下方可配置过渡手势、easing、shuttle-on-push/pop 等。"></page-intro>
  <view class="main">
    <share-element class="share-element" share-key="left" :shuttle-on-pop="shuttleOnPopType"
      :transition-on-gesture="transitionOnGesture" :shuttle-on-push="shuttleOnPushType"  :easing-function="easingFunctionType" @tap="openPage()">
      <image style="width: 100px;height: 150px;"
        src="https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/drop-card-1.jpg">
      </image>
    </share-element>
  </view>
  <button type="primary" @click="openPage" class="button">
    打开share-element页面
  </button>

  <scroll-view style="flex: 1">
    <view class="content">
      <boolean-data :defaultValue="transitionOnGesture" title="transition-on-gesture= true(仅iOS生效)"
        @change="changeTransitionOnGesture"></boolean-data>

      <text class="uni-common-mt choose-property-title">easing-function:</text>
      <radio-group class="choose-property-type-radio-group" @change="handleEasingFunction">
        <radio class="ml-10 uni-common-mt" v-for="item in easingFunctionTypeList" :key="item" :value="item"
          :checked="easingFunctionType == item">{{ item }}
        </radio>
      </radio-group>

      <text class="uni-common-mt choose-property-title">shuttle-on-push(仅iOS生效):</text>
      <radio-group class="choose-property-type-radio-group" @change="handleShuttleOnPushType">
        <radio class="ml-10 uni-common-mt" v-for="item in shuttleOnTypeList" :key="item" :value="item"
          :checked="shuttleOnPushType == item">{{ item }}
        </radio>
      </radio-group>

      <text class="uni-common-mt choose-property-title">shuttle-on-pop(仅iOS生效):</text>
      <radio-group class="choose-property-type-radio-group" @change="handleShuttleOnPopType">
        <radio class="ml-10 uni-common-mt" v-for="item in shuttleOnTypeList" :key="item" :value="item"
          :checked="shuttleOnPopType == item">{{ item }}
        </radio>
      </radio-group>

      <text class="uni-common-mt choose-property-title">animationType(页面动画降级):</text>
      <radio-group class="choose-property-type-radio-group" @change="handleOpenAnimationType">
        <radio class="ml-10 uni-common-mt" v-for="item in openAnimationTypeList" :key="item" :value="item"
          :checked="openAnimationType == item">{{ item }}
        </radio>
      </radio-group>
    </view>
  </scroll-view>
  <button  @click="gotoShareElementWithSwiper" class="button">
    打开share-element-with-swiper页面
  </button>
  <view style="height: 80px;"></view>
  <share-element class="bottomWrap" share-key="bottom" @tap="openPage()" transitionOnGesture=true>
    <view class="bottom">
      <text style="color: white;">share-element(底部固定)</text>
    </view>
  </share-element>
</template>
<script setup lang="uts">
  type ShareElementOpenAnimationType =
    'auto' |
    'none' |
    'slide-in-right' |
    'slide-in-left' |
    'slide-in-top' |
    'slide-in-bottom' |
    'fade-in' |
    'pop-in' |
    'zoom-out' |
    'zoom-fade-out'

  type ShareElementEasingFunctionType =
    'ease' |
    'ease-in' |
    'ease-out' |
    'ease-in-out' |
    'linear'

  type ShuttleOnType =
    'from' |
    'to'

  import { ItemType } from '@/components/enum-data/enum-data-types'

  const transitionOnGesture = ref(true)
  const shuttleOnPopType = ref('to' as ShuttleOnType)
  const shuttleOnPushType = ref('to' as ShuttleOnType)
  const shuttleOnTypeList = [
    'from',
    'to'
  ]
  const openAnimationType = ref('slide-in-right' as ShareElementOpenAnimationType)
  const openAnimationTypeList = [
    'auto',
    'none',
    'slide-in-right',
    'slide-in-left',
    'slide-in-top',
    'slide-in-bottom',
    'fade-in',
    'pop-in',
    'zoom-out',
    'zoom-fade-out'
  ]
  const easingFunctionType = ref('ease' as ShareElementEasingFunctionType)
  const easingFunctionTypeList = [
    'ease',
    'ease-in',
    'ease-out',
    'ease-in-out',
    'linear'
  ]

  const openPage = () => {
    uni.navigateTo({
      animationType: openAnimationType.value,
      url: "/pages/component/share-element/share-element-to?shuttleOnPush=" + shuttleOnPushType.value + "&transitionOnGesture=" + transitionOnGesture.value
    })
  }

  const gotoShareElementWithSwiper = () => {
    uni.navigateTo({
      url:'/pages/component/share-element/share-element-with-swiper'
    })
  }

  const changeTransitionOnGesture = (checked : boolean) => {
    console.log(`changeTransitionOnGesture:${checked}`)
    transitionOnGesture.value = checked
  }

  const handleOpenAnimationType = (e : RadioGroupChangeEvent) => {
    openAnimationType.value = e.detail.value as ShareElementOpenAnimationType
  }

  const handleEasingFunction = (e : RadioGroupChangeEvent) => {
    easingFunctionType.value = e.detail.value as ShareElementEasingFunctionType
  }

  const handleShuttleOnPopType = (e : RadioGroupChangeEvent) => {
    shuttleOnPopType.value = e.detail.value as ShuttleOnType
  }

  const handleShuttleOnPushType = (e : RadioGroupChangeEvent) => {
    shuttleOnPushType.value = e.detail.value as ShuttleOnType
  }

  defineExpose({
    transitionOnGesture,
    shuttleOnPopType,
    shuttleOnPushType,
    shuttleOnTypeList,
    openAnimationType,
    openAnimationTypeList,
    easingFunctionType,
    easingFunctionTypeList,
    openPage,
    gotoShareElementWithSwiper,
    changeTransitionOnGesture,
    handleOpenAnimationType,
    handleEasingFunction,
    handleShuttleOnPopType,
    handleShuttleOnPushType
  })
</script>

<style>
  .ml-10 {
    margin-left: 10px;
  }

  .choose-property-title {
    font-weight: bold;
  }

  .choose-property-type-radio-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .bottomWrap {
    width: 100%;
    bottom: 0px;
    height: 80px;
    position: fixed;
  }

  .bottom {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background-color: #007aff;
  }

  .main {
    padding: 5px 0;
    align-items: center;
    justify-content: center;
  }
</style>