123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- <template>
- <view class="u-page">
- <u-gap height="20" bgColor="#fff"></u-gap>
- <u-cell-group border>
- <u-cell
- :titleStyle="{ fontWeight: 500 }"
- @click="openTransition(item.mode)"
- :title="item.title"
- v-for="(item, index) in list"
- :key="index"
- clickable
- >
- <image
- slot="icon"
- class="u-cell-icon"
- :src="item.iconUrl"
- mode="widthFix"
- ></image>
- </u-cell>
- <u-transition
- :mode="mode"
- :show="show"
- :custom-style="style"
- @click="click"
- @beforeEnter="beforeEnter"
- @enter="enter"
- @afterEnter="afterEnter"
- @beforeLeave="beforeLeave"
- @leave="leave"
- @afterLeave="afterLeave"
- >
- <view class="transition"></view>
- </u-transition>
- </u-cell-group>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- mode: "",
- show: false,
- style: {
- position: "fixed",
- top: `${uni.$u.sys().windowHeight / 2 - 50}px`,
- left: `${uni.$u.sys().windowWidth / 2 - 50}px`,
- width: "120px",
- height: "120px",
- backgroundColor: "#1989fa",
- },
- list: [
- {
- mode: "fade",
- title: "淡入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/fade.png",
- },
- {
- mode: "fade-up",
- title: "上滑淡入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/fadeUp.png",
- },
- {
- mode: "zoom",
- title: "缩放",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/zoom.png",
- },
- {
- mode: "fade-zoom",
- title: "缩放淡入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/fadeZoom.png",
- },
- {
- mode: "fade-down",
- title: "下滑淡入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/fadeDown.png",
- },
- {
- mode: "fade-left",
- title: "左滑淡入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/fadeLeft.png",
- },
- {
- mode: "fade-right",
- title: "右滑淡入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/fadeRight.png",
- },
- {
- mode: "slide-up",
- title: "上滑进入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/slideUp.png",
- },
- {
- mode: "slide-down",
- title: "下滑进入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/slideDown.png",
- },
- {
- mode: "slide-left",
- title: "左滑进入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/slideLeft.png",
- },
- {
- mode: "slide-right",
- title: "右滑进入",
- iconUrl:
- "https://cdn.uviewui.com/uview/demo/transition/slideRight.png",
- },
- ],
- };
- },
- mixins: [uni.$u.mixin],
- methods: {
- openTransition(mode) {
- this.mode = mode;
- this.show = true;
- setTimeout(() => {
- this.show = false;
- }, 1500);
- },
- click() {
- // console.log("click");
- },
- beforeEnter() {
- // console.log("beforeEnter");
- },
- enter() {
- // console.log("enter");
- },
- afterEnter() {
- // console.log("afterEnter");
- },
- beforeLeave() {
- // console.log("beforeLeave");
- },
- leave() {
- // console.log("leave");
- },
- afterLeave() {
- // console.log("afterLeave");
- },
- },
- };
- </script>
- <style lang="scss">
- .u-page {
- padding: 0;
- }
- .transition {
- background-color: $u-primary;
- }
- </style>
|