新增 模板示例-drop-card

pages.json

@@ -440,12 +440,12 @@
       "style": {
         "navigationBarTitleText": "text-decoration-line"
       }
-        },{
+    }, {
       "path": "pages/CSS/transition/transition",
       "style": {
         "navigationBarTitleText": "Transition"
       }
-        },{
+    }, {
       "path": "pages/CSS/transform/transform",
       "style": {
         "navigationBarTitleText": "Transform"
@@ -528,47 +528,53 @@
       }
 
     }, {
-		    "path" : "pages/component/scroll-view/scroll-view-refresher",
-		    "style" :                                                                                    
-		    {
+      "path": "pages/component/scroll-view/scroll-view-refresher",
+      "style": {
         "navigationBarTitleText": "scroll-view-refresher",
         "enablePullDownRefresh": false
       }
 
-		}
-        ,{
-            "path" : "pages/component/list/list",
-            "style" :                                                                                    
-            {
+    }, {
+      "path": "pages/component/list/list",
+      "style": {
         "navigationBarTitleText": "列表到详情示例",
         "enablePullDownRefresh": false
       }
 
-        }
-        ,{
-            "path" : "pages/API/get-network-type/get-network-type",
-            "style" :                                                                                    
-            {
+    }, {
+      "path": "pages/API/get-network-type/get-network-type",
+      "style": {
         "navigationBarTitleText": "",
         "enablePullDownRefresh": false
       }
 
-        }
-        ,{
-            "path" : "pages/component/list/detail/detail",
-            "style" :                                                                                    
-            {
+    }, {
+      "path": "pages/component/list/detail/detail",
+      "style": {
         "navigationBarTitleText": "详情示例",
         "enablePullDownRefresh": false
       }
 
-        }
-        ,{
-            "path" : "pages/API/page-scrollTo/page-scrollTo",
-            "style" : {
+    }, {
+      "path": "pages/API/page-scrollTo/page-scrollTo",
+      "style": {
         "navigationBarTitleText": "pageScrollTo",
         "enablePullDownRefresh": false
       }
+    }, {
+      "path": "pages/template/drop-card/drop-card",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
+
+    }, {
+      "path": "pages/tabBar/template/template",
+      "style": {
+        "navigationBarTitleText": "模板",
+        "enablePullDownRefresh": false
+      }
+
     }
   ],
   "globalStyle": {
@@ -607,6 +613,12 @@
         "iconPath": "static/extui.png",
         "selectedIconPath": "static/extuiHL.png",
         "text": "CSS"
+      },
+      {
+        "pagePath": "pages/tabBar/template/template",
+        "iconPath": "static/template.png",
+        "selectedIconPath": "static/templateHL.png",
+        "text": "模板"
       }
     ]
   },

pages/tabBar/template/template.uvue

+<template>
+  <view class="uni-container">
+    <view class="uni-header-logo">
+      <image class="uni-header-image" src="/static/templateIndex.png"></image>
+    </view>
+    <view class="uni-hello-text">
+      <text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
+      <u-link class="hello-link" href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'"
+        :inWhiteList="true"></u-link>
+    </view>
+    <view class="uni-panel" v-for="(item, index) in list" :key="item.id">
+      <view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item)">
+        <text class="uni-panel-text" :class="item.enable == false ? 'text-disabled' : ''">{{item.name}}</text>
+        <image :src="item.pages.length > 0 ? item.open ? arrowUpIcon : arrowDownIcon : arrowRightIcon" class="uni-icon">
+        </image>
+      </view>
+      <view class="uni-panel-c" v-if="item.open">
+        <view class="uni-navigate-item" v-for="(page,key) in item.pages" :key="key" @click="goDetailPage(page)">
+          <text class="uni-navigate-text" :class="page.enable != true ? 'text-disabled' : ''">{{page.name}}</text>
+          <image :src="arrowRightIcon" class="uni-icon"></image>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+  type Page = {
+    name : string,
+    enable ?: boolean,
+    url : string
+  }
+
+  type ListItem = {
+    id : string,
+    name : string,
+    open : boolean,
+    pages : Page[],
+    url ?: string,
+    enable ?: boolean
+  }
+  export default {
+    data() {
+      return {
+        list: [
+          {
+            id: "drop-card",
+            url: "drop-card",
+            name: "drop-card",
+            open: false,
+            enable: true,
+            pages: [] as Page[]
+          }
+        ] as ListItem[],
+        arrowUpIcon: '/static/icons/arrow-up.png',
+        arrowDownIcon: '/static/icons/arrow-down.png',
+        arrowRightIcon: '/static/icons/arrow-right.png',
+      }
+    },
+    methods: {
+      triggerCollapse(index ?: number, item : ListItem) {
+        if (item.pages.length == 0) {
+          const page : Page = {
+            name: item.name,
+            enable: item.enable,
+            url: item.url!
+          }
+          this.goDetailPage(page);
+          return;
+        }
+        for (var i = 0; i < this.list.length; ++i) {
+          if (index == i) {
+            this.list[i].open = !this.list[i].open;
+          } else {
+            this.list[i].open = false;
+          }
+        }
+      },
+      goDetailPage(e : Page) {
+        if (e.enable != true) {
+          uni.showToast({
+            icon: 'none',
+            title: '暂不支持'
+          })
+          return
+        }
+        const url = e.url.indexOf('platform') > -1 ? e.url : `/pages/template/${e.url}/${e.url}`
+        uni.navigateTo({
+          url
+        })
+      }
+    }
+  }
+</script>
+
+<style>
+  @import '../../../common/uni-uvue.css';
+
+  .uni-container {
+    flex: 1;
+  }
+</style>
\ No newline at end of file

pages/template/drop-card/drop-card.uvue

+<template>
+  <view class="root">
+    <view class="card"
+      :style="{'top':Math.abs(x)/-60 + 90 +'px',transform:'scale('+(movePercent/10+0.80)+')','height':cardHeight+'px'}">
+      <image class="user-img" :src="userList[0]"></image>
+    </view>
+    <view class="card"
+      :style="{'top':Math.abs(x)/-30 + 45 +'px',transform:'scale('+(movePercent/10+0.90)+')','height':cardHeight+'px'}">
+      <image class="user-img" :src="userList[1]"></image>
+    </view>
+    <view @touchmove="touchmove" @touchstart="touchstart" @touchend="touchend"
+      :style="{'transform':'translate('+x+'px,'+y+'px) rotate('+x/-30+'deg)','height':cardHeight+'px'}" class="card">
+      <image class="user-img" :src="userList[2]"></image>
+      <view class="state">
+        <image class="state-icon like" :style="{'opacity':x < 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/like.png" mode="widthFix"></image>
+        <image class="state-icon dislike" :style="{'opacity':x > 0 ? 0 : movePercent * 10}" src="/static/template/drop-card/dislike.png" mode="widthFix"></image>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+  let sX : number = 0,
+      sY : number = 0,
+      screenWidth : number = 1;
+  export default {
+    data() {
+      return {
+        x: 0,
+        y: 0,
+        cardHeight:1,
+        userList: [
+          '/static/template/drop-card/1.png',
+          '/static/template/drop-card/2.png',
+          '/static/template/drop-card/3.png'
+        ]
+      }
+    },
+    computed: {
+      movePercent() : number {
+        return Math.abs(this.x) / screenWidth
+      },
+      likeOpacity() : number{
+        return this.x < 0 ? 0 : this.movePercent * 100
+      },
+      dislikeOpacity() : number{
+        return this.x > 0 ? 0 : this.movePercent * 100
+      }
+    },
+    onLoad() {
+      uni.getSystemInfo({
+        success: (e) => {
+          console.log('e',e);
+          screenWidth = e.screenWidth
+          this.cardHeight = e.screenHeight - 200
+        }
+      })
+    },
+    methods: {
+      changeUserList() {
+        let user:string = this.userList[this.userList.length - 1]
+        this.userList.unshift(user)
+        this.userList.pop()
+        this.x = 0;
+        this.y = 0;
+      },
+      touchstart(e : TouchEvent) {
+        sX = e.touches[0].screenX;
+        sY = e.touches[0].screenY;
+      },
+      touchmove(e : TouchEvent) {
+        this.x += e.touches[0].screenX - sX;
+        this.y += e.touches[0].screenY - sY;
+        sX = e.touches[0].screenX;
+        sY = e.touches[0].screenY;
+      },
+      touchend() {
+        if (this.x > screenWidth / 6) {
+          let interval : number = 0;
+          interval = setInterval(() => {
+            this.x += 10
+            this.y += 3
+            if (this.x > screenWidth) {
+              clearInterval(interval)
+              this.changeUserList()
+            }
+          }, 6)
+        } else if (this.x < screenWidth * -1 / 6) {
+          let interval : number = 0;
+          interval = setInterval(() => {
+            this.x -= 10
+            this.y += 3
+            if (this.x < -screenWidth) {
+              clearInterval(interval)
+              this.changeUserList()
+            }
+          }, 6)
+        } else {
+          this.x = 0
+          this.y = 0
+        }
+      }
+    }
+  }
+</script>
+<style>
+  .root {
+    flex: 1;
+    position: relative;
+  }
+
+  .card {
+    width: 700rpx;
+    height: 750rpx;
+    position: absolute;
+    margin: 0 25rpx;
+    margin-top: 30px;
+    border-radius: 10px;
+    color: #FFF;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  }
+  
+  .user-img{
+    border-radius: 10px;
+  }
+  
+  .state {
+    top: 20rpx;
+    left: 20rpx;
+    width: 650rpx;
+    padding: 4px;
+    position: absolute;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .state-icon {
+    width: 30px;
+    height: 30px;
+    border: 1px solid #FFF;
+    background-color: #FFF;
+    padding: 3px;
+    border-radius: 100px;
+    box-shadow: 0 0 1px #EBEBEB;
+  }
+</style>
\ No newline at end of file