banner 轮播 和 图片预览

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

pages/index/index.vue

@@ -1,4 +1,10 @@
 <template>
+	<swiper indicator-dots circular :autoplay="false" class="banner">
+		<swiper-item v-for="item in pic.list" :key="item.id">
+			<image @tap="previewImage(item)" :src="item.url"></image>
+		</swiper-item>
+	</swiper>
+
 	<view class="content">
 		<image class="logo" src="/static/logo.png"></image>
 		<view class="text-area">
@@ -11,19 +17,43 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello 12345'
+				title: 'Hello 12345',
+				pic: {
+					list: [
+						{
+							id: 1,
+							url: "https://www.httpbin.org/image/png",
+						},
+						{
+							id: 2,
+							url: "https://www.httpbin.org/image/jpeg",
+						},
+					]
+				}
 			}
 		},
 		onLoad() {
 
 		},
 		methods: {
-
+			previewImage(item) {
+				uni.previewImage({
+					current: item.url,
+					urls: this.pic.list.map(item => item.url),
+					indicator: 'default',
+					loop: true
+				})
+			}
 		}
 	}
 </script>
-
 <style>
+	.banner,
+	.banner image {
+		width: 750rpx;
+		height: 450rpx;
+	}
+
 	.content {
 		display: flex;
 		flex-direction: column;
@@ -49,4 +79,4 @@
 		font-size: 36rpx;
 		color: #8f8f94;
 	}
-</style>
+</style>