128 lines
3.3 KiB
Vue
Executable File
128 lines
3.3 KiB
Vue
Executable File
<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" @click="toRoomAction(item)">
|
|
<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')
|
|
},
|
|
toRoomAction(item) {
|
|
console.log(item)
|
|
uni.navigateTo({
|
|
url: '/pages/room/index?id=' + item.id,
|
|
success() {
|
|
console.log('success')
|
|
},
|
|
fail(err) {
|
|
console.log('fail',err)
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</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 35px 20px;
|
|
}
|
|
|
|
.item-image {
|
|
width: 100%;
|
|
height: 200px;
|
|
background-color: #eeeeee;
|
|
}
|
|
|
|
.item-text {
|
|
line-height: 40px;
|
|
color: #3B4144;
|
|
}
|
|
</style>
|