beizhu

src/views/vote/list.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}"   @touchstart='touchStart' 
+                      @touchmove='touchMove'>
     <img class="BannerImage" :src="activity.Banner">
     <div :class="IsOk?onscroll1:onscroll2">
       <div :class="isOK?searchs:searchb">
@@ -39,23 +40,23 @@
           </div>
         </van-list>
         <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
-        <div class="LatestUpload" v-if="!temp">
-          <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
-            <div
-              :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
-              @click="gotovotingdetails(item.MemberId)"
-            >
-              <img :src="item.Photo">
-            </div>
-            <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
-            <span class="ActivePersonnelName">{{item.Name}}</span>
-            <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
-            <div class="VoteNumber">
-              <span>已获投票数：</span>
-              <p>{{item.Vote}}票</p>
+          <div class="LatestUpload" v-if="!temp">
+            <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
+              <div
+                :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
+                @click="gotovotingdetails(item.MemberId)"
+              >
+                <img :src="item.Photo">
+              </div>
+              <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
+              <span class="ActivePersonnelName">{{item.Name}}</span>
+              <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
+              <div class="VoteNumber">
+                <span>已获投票数：</span>
+                <p>{{item.Vote}}票</p>
+              </div>
             </div>
           </div>
-        </div>
         </van-list>
       </div>
     </div>
@@ -79,14 +80,18 @@ export default {
   name: "lotterylist",
   data() {
     return {
-      first:false,
-      second:false,
-      active:true,
-      isactive:true,
-      newly1:'newly1',
-      newly2:'newly2',
-      newlyone:'newlyone',
-      newlytwo:'newlytwo',
+       startY:0,//开始触摸的位置
+      moveY:0,//滑动时的位置
+      endX:0,//结束触摸的位置
+      disY:0,//移动距离
+      first: false,
+      second: false,
+      active: true,
+      isactive: true,
+      newly1: "newly1",
+      newly2: "newly2",
+      newlyone: "newlyone",
+      newlytwo: "newlytwo",
       temp: true,
       signupBtn: true,
       signupBtnOne: "signupBtnOne",
@@ -122,7 +127,11 @@ export default {
     toast
   },
   mounted() {
-    window.addEventListener("touchmove", this.handleScroll, true);
+    window.addEventListener("scroll", this.handleScroll, true);
+
+    // var mybody = document.getElementsByTagName('body')[0]
+    // mybody.addEventListener("touchstart", this.touchstart);
+    // mybody.addEventListener("touchmove", this.touchmove);
     // 监听（绑定）滚轮 滚动事件
   },
   computed: {
@@ -139,12 +148,12 @@ export default {
       this.coverImgUrl = true;
       this.signupBtn = true;
       this.isOK = true;
-      this.first=true;
+      this.first = true;
     } else if (this.actid == 2) {
       this.coverImgUrl = false;
       this.signupBtn = false;
       this.isOK = false;
-      this.second=true;
+      this.second = true;
     }
     this.getActivity({
       actid: this.actid
@@ -155,14 +164,15 @@ export default {
   methods: {
     qh(t) {
       this.temp = t;
-      if(t==true){
-         this.active=true;
-         this.isactive=true;
-      }else{
-        this.active=false;
-        this.isactive=false;
+      if (t == true) {
+        this.active = true;
+        this.isactive = true;
+      } else {
+        this.active = false;
+        this.isactive = false;
       }
     },
+
     handleScroll() {
       // 页面滚动距顶部距离
       var scrollTop =
@@ -176,7 +186,32 @@ export default {
       }
     },
 
-       onLoad() {
+    touchstart(e) {
+      e.preventDefault();
+      var startX = e.touches[0].pageX;
+      var startY = e.touches[0].pageY;
+    },
+    touchmove(e) {
+      // var startX, startY, moveEndX, moveEndY, X, Y
+      e.preventDefault();
+      var moveEndX = e.changedTouches[0].pageX;
+      var moveEndY = e.changedTouches[0].pageY;
+      var X = moveEndX - startX;
+      var Y = moveEndY - startY;
+      if (X > 0) {
+        alert("‘向右’");
+      } else if (X < 0) {
+        alert("‘向左’");
+      } else if (Y > 0) {
+        alert("‘向下’");
+      } else if (Y < 0) {
+        alert("‘向上’");
+      } else {
+        alert("‘没滑动’");
+      }
+    },
+
+    onLoad() {
       // 异步更新数据
       setTimeout(() => {
         for (let i = 0; i < 10; i++) {
@@ -486,62 +521,62 @@ export default {
         flex-direction: row;
         justify-content: space-between;
 
-           .newly1 {
-        width: 47.5%;
-        font-size: 0.16rem;
-        font-family: PingFangSC-Medium;
-        font-weight: bolder;
-        color: rgba(255, 255, 255, 1);
-        line-height: 0.22rem;
-        background: rgba(166, 184, 201, 1);
-        border-radius: 0.06rem;
-        text-align: center;
-        padding: 0.09rem 0;
-      }
-      .newly2{
-         width: 47.5%;
-        font-size: 0.16rem;
-        font-family: PingFangSC-Medium;
-        font-weight: bolder;
-        color: rgba(255, 255, 255, 1);
-        line-height: 0.22rem;
-        background: rgba(217,226,233,1);
-        border-radius: 0.06rem;
-        text-align: center;
-        padding: 0.09rem 0;
-      }
+        .newly1 {
+          width: 47.5%;
+          font-size: 0.16rem;
+          font-family: PingFangSC-Medium;
+          font-weight: bolder;
+          color: rgba(255, 255, 255, 1);
+          line-height: 0.22rem;
+          background: rgba(166, 184, 201, 1);
+          border-radius: 0.06rem;
+          text-align: center;
+          padding: 0.09rem 0;
+        }
+        .newly2 {
+          width: 47.5%;
+          font-size: 0.16rem;
+          font-family: PingFangSC-Medium;
+          font-weight: bolder;
+          color: rgba(255, 255, 255, 1);
+          line-height: 0.22rem;
+          background: rgba(217, 226, 233, 1);
+          border-radius: 0.06rem;
+          text-align: center;
+          padding: 0.09rem 0;
+        }
       }
 
-         .sortlist2 {
+      .sortlist2 {
         width: 94%;
         display: flex;
         flex-direction: row;
         justify-content: space-between;
 
-           .newlyone {
-        width: 47.5%;
-        font-size: 0.16rem;
-        font-family: PingFangSC-Medium;
-        font-weight: bolder;
-        color: rgba(255, 255, 255, 1);
-        line-height: 0.22rem;
-        background: rgba(126,100,86,1);
-        border-radius: 0.06rem;
-        text-align: center;
-        padding: 0.09rem 0;
-      }
-      .newlytwo{
-         width: 47.5%;
-        font-size: 0.16rem;
-        font-family: PingFangSC-Medium;
-        font-weight: bolder;
-        color: rgba(255, 255, 255, 1);
-        line-height: 0.22rem;
-        background: rgba(173,145,129,0.62);
-        border-radius: 0.06rem;
-        text-align: center;
-        padding: 0.09rem 0;
-      }
+        .newlyone {
+          width: 47.5%;
+          font-size: 0.16rem;
+          font-family: PingFangSC-Medium;
+          font-weight: bolder;
+          color: rgba(255, 255, 255, 1);
+          line-height: 0.22rem;
+          background: rgba(126, 100, 86, 1);
+          border-radius: 0.06rem;
+          text-align: center;
+          padding: 0.09rem 0;
+        }
+        .newlytwo {
+          width: 47.5%;
+          font-size: 0.16rem;
+          font-family: PingFangSC-Medium;
+          font-weight: bolder;
+          color: rgba(255, 255, 255, 1);
+          line-height: 0.22rem;
+          background: rgba(173, 145, 129, 0.62);
+          border-radius: 0.06rem;
+          text-align: center;
+          padding: 0.09rem 0;
+        }
       }
 
       .LatestUpload {