测试轮播图

src/manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "",
-	"appid": "",
+	"appid": "wxb79066d2b41b9e50",
 	"description": "",
 	"versionName": "1.0.0",
 	"versionCode": "100",

src/pages/find/find.vue

@@ -1,19 +1,105 @@
 <template>
-    <div class="cx-find">
-        <p>发现页面</p>
-    </div>
+  <div class="cx-find">
+    <!-- <div class="bannerBox">
+      <div class="imgBox">
+          <img class="bannerImg" v-for="(item, index) in imgArr" :key="item" :src="item" v-show="index == nowIndex">
+      </div>
+      <div class="circleBox">
+        <p v-for="(item, index) in imgArr" :key="index" :class="(index == nowIndex) ? 'selected' : 'bannerCircle'"></p>
+      </div>
+    </div> -->
+  </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return {
-
-        }
+  data() {
+    return {
+      nowIndex: 0,
+      timeObj: {},
+      imgArr: []
     }
+  },
+
+  onLoad() {
+    setTimeout(() => {
+      this.imgArr = [
+        '../../static/images/headPic1.jpg',
+        '../../static/images/headPic2.jpg',
+        '../../static/images/headPic3.jpg',
+        '../../static/images/headPic4.jpg',
+        '../../static/images/headPic5.jpg',
+        '../../static/images/avart.jpg',
+        '../../static/images/avart2.jpg'
+    ]
+    }, 1000);
+    // this.autoPlay();
+
+    // const obj = new Map([['id', 101], ['name', 'admin'], ['age', 18], ['sex', '男']]);
+    // for(const [key, value] of obj) {
+    //   console.log(`Key: ${key}, Value:  ${value}`);
+    // }
+
+  },
+
+  methods: {
+        // autoPlay() {
+        //     let that = this;
+        //     for(let i=0; i<this.imgArr.length; i++) {
+        //         this.imgArr[i] = this.nowIndex;
+        //     };
+        //     if (this.nowIndex == 0) {
+        //        this.timeObj = setInterval(() => {
+        //             that.nowIndex++;
+        //         }, 2500);
+        //     };
+        //     if (this.nowIndex == this.imgArr.length) {
+        //        clearInterval(this.timeObj);
+        //        this.nowIndex = 0;
+        //     };
+        // }
+  }
 }
 </script>
 
 <style lang="less">
-    
+    .cx-find {
+        .bannerBox {
+            margin: 10rpx 5%;
+            position: relative;
+            width: 90%;
+            height: 350rpx;
+            .imgBox {
+                width: 100%;
+                height: 100%;
+                .bannerImg {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .circleBox {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                margin-left: 162rpx;
+                width: 350rpx;
+                height: 12rpx;
+                display: flex;
+                p {
+                    margin-left: 8rpx;
+                    justify-content: center;
+                    margin-top: 1rpx;
+                    float: left;
+                    width: 40rpx;
+                    height: 10rpx;
+                }
+            }
+        }
+        .bannerCircle {
+            background: rgba(0, 0, 0, .3);
+        }
+        .selected {
+            background: rgba(208, 2, 27, .7);
+        }
+    }
 </style>