初始化

2020-08-18 01:11:18 +08:00
commit f37f31627e
@@ -0,0 +1,115 @@
+<template>
+	<view class="container">
+		<scroll-view scroll-y="true" class="list-scroll-box" :enable-flex="true">
+			<view class="list-item" v-for="(item,index) in roomList" :key="item.id">
+				<image class="item-image" mode="aspectFill" :src="item.img" @error="imageError(index)"></image>
+				<text class="item-text">{{item.roomName}}</text>
+				<text class="item-text">{{item.roomHost}}</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				roomList: [{
+						img: 'https://img.iplaysoft.com/wp-content/uploads/2019/free-images/free_stock_photo.jpg',
+						id: '1',
+						roomName: '绝对算得上是',
+						roomHost: '是绝大多数健康的'
+					},
+					{
+						img: 'https://img.51miz.com/Element/00/65/63/69/522ef8a9_E656369_e2a36af8.jpg',
+						id: '2',
+						roomName: '绝对算得上是',
+						roomHost: '是绝大多数健康的'
+					},
+					{
+						img: 'https://attach.setn.com/newsimages/2019/12/01/2277098-PH.jpg',
+						id: '3',
+						roomName: '绝对算得上是',
+						roomHost: '是绝大多数健康的'
+					},
+					{
+						img: 'https://www.gaoguang.com/uploads/allimg/180816/2-1PQ60ZF8.jpg',
+						id: '4',
+						roomName: '绝对算得上是',
+						roomHost: '是绝大多数健康的'
+					},
+					{
+						img: 'https://i.keaitupian.net/up/00/fb/0f/e88cb18c6ceb16cc9aa91ac1630ffb00.jpg',
+						id: '5',
+						roomName: '绝对算得上是',
+						roomHost: '是绝大多数健康的'
+					},
+					{
+							img: 'https://img.iplaysoft.com/wp-content/uploads/2019/free-images/free_stock_photo.jpg',
+							id: '1',
+							roomName: '绝对算得上是',
+							roomHost: '是绝大多数健康的'
+						},
+						{
+							img: 'https://img.51miz.com/Element/00/65/63/69/522ef8a9_E656369_e2a36af8.jpg',
+							id: '2',
+							roomName: '绝对算得上是',
+							roomHost: '是绝大多数健康的'
+						},
+						{
+							img: 'https://attach.setn.com/newsimages/2019/12/01/2277098-PH.jpg',
+							id: '3',
+							roomName: '绝对算得上是',
+							roomHost: '是绝大多数健康的'
+						},
+						{
+							img: 'https://www.gaoguang.com/uploads/allimg/180816/2-1PQ60ZF8.jpg',
+							id: '4',
+							roomName: '绝对算得上是',
+							roomHost: '是绝大多数健康的'
+						},
+						{
+							img: 'https://i.keaitupian.net/up/00/fb/0f/e88cb18c6ceb16cc9aa91ac1630ffb00.jpg',
+							id: '5',
+							roomName: '绝对算得上是',
+							roomHost: '是绝大多数健康的'
+						}
+				]
+			}
+		},
+		methods: {
+			imageError(index) {
+				this.roomList[index].img = require('@/static/image/errImage.jpeg')
+			}
+		}
+	}
+</script>
+
+<style>
+	.container {
+		padding: 40px 20px;
+		font-size: 28px;
+		line-height: 48px;
+	}
+
+	.list-scroll-box {
+		display: flex;
+		justify-content:flex-start;
+		flex-wrap: wrap;
+	}
+	.list-item {
+		width: 197px;
+		margin: 0 20px 30px 20px;
+	}
+
+	.item-image {
+		width: 100%;
+		height: 200px;
+		background-color: #eeeeee;
+	}
+
+	.item-text {
+		line-height: 40px;
+		color: #3B4144;
+	}
+</style>