<template>
<view class="pages">
<view class="box" v-for="(item, index) in dtarr" :key="index">
<view class="box_top">
<view class="avat" style="background-image: url('../../../static/img/logo.png');">
<image :src="item.avatar" mode="widthFix"></image>
</view>
<view class="grmsg">
<text>{{item.nickname}}</text>
<view class="ro">
<ali-icon type="dingwei" size="20" color="#ff6600"></ali-icon>
<text>{{item.address}} {{item.age}}岁</text>
</view>
</view>
<view class="time">
{{item.time}}
</view>
</view>
<view class="box_cont">
<text v-if="item.titlemsg != '' ">{{item.titlemsg}}</text>
<image class="bigimg" v-if="item.bigimg != '' " :src="item.bigimg" mode="aspectFit"></image>
<video class="video" v-if="item.video != '' " :src="item.video" controls poster="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2895986097,3609514076&fm=173&app=25&f=JPEG?w=600&h=400&s=DBACB7475B8662D2062E5B6D0300E068"></video>
<view v-if="item.smimg.length > 1" class="smingarr">
<view v-for="(items, indexsr) in item.smimg" :key="indexsr" class="smimgcss">
<image :src="items.url" mode="widthFix"></image>
</view>
</view>
</view>
<view class="box_bottom">
<view class="smavatar">
<image src="../../../static/img/logo.png" mode="widthFix"></image>
</view>
<view class="zanandpl">
<view class="zan">
1赞
</view>
<view class="pinglun">
20
</view>
</view>
</view>
</view>
</view>
</template>
<script>
var that;
export default {
data() {
return {
dtarr: [
{
id: 1,
avatar: '../../../static/img/dtavt.jpg',
nickname: '倔强的小题莫',
address: '山西阳泉',
age: '23',
time: '10.14 19.34',
titlemsg: '即使生活给了你百般阻挠，也没有必要用矫情放大自己的不容易',
bigimg: '../../../static/img/dt1.jpg',
video: '',
zan: 1,
pinglun: '120',
zanavatar: [
{
id: 1,
avatarimg: '../../../static/img/smavt.jpg'
}
],
smimg: [
]
},
{
id: 2,
avatar: '../../../static/img/dtavt.jpg',
nickname: '倔强的小白兔',
address: '山西阳泉',
age: '23',
time: '10.14 19.34',
titlemsg: '即使生活给了你百般阻挠，也没有必要用矫情放大自己的不容易',
bigimg: '',
video: '',
zan: 1,
pinglun: '120',
zanavatar: [
{
id: 1,
avatarimg: '../../../static/img/smavt.jpg'
}
],
smimg: [
{
id: 1,
url: '../../../static/img/smimg.jpg'
},
{
id: 2,
url: '../../../static/img/smimg.jpg'
},
{
id: 3,
url: '../../../static/img/smimg.jpg'
},
{
id: 4,
url: '../../../static/img/smimg.jpg'
},
{
id: 5,
url: '../../../static/img/smimg.jpg'
},
{
id: 6,
url: '../../../static/img/smimg.jpg'
},
{
id: 7,
url: '../../../static/img/smimg.jpg'
},
{
id: 8,
url: '../../../static/img/smimg.jpg'
},
{
id: 9,
url: '../../../static/img/smimg.jpg'
}
]
},
{
id: 3,
avatar: '../../../static/img/dtavt.jpg',
nickname: '倔强的小乌龟',
address: '山西阳泉',
age: '23',
time: '10.14 19.34',
titlemsg: '即使生活给了你百般阻挠，也没有必要用矫情放大自己的不容易',
bigimg: '',
video: 'https://www.dcloud.io/uniapp/wap2appvsnative.mp4',
zan: 1,
pinglun: '120',
zanavatar: [
{
id: 1,
avatarimg: '../../../static/img/smavt.jpg'
}
],
smimg: [
]
},
]
}
},
components: {
},
methods: {
},
onLoad() {
that= this;
}
}
</script>
<style>
.pages{
padding: 24upx;
box-sizing: border-box;
width: 100%;
}
.box{
padding: 15upx;
border-radius: 10upx;
box-shadow: 0 4upx 24upx 0 rgba(255,236,235,.9);
margin-bottom: 38upx;
}
.box_top{
display: flex;
justify-content: space-between;
}
.avat{
width: 100upx;
height: 100upx;
background-size: 100% 100%;
flex: 0 0 100upx;
}
.avat image{
width: 84upx;
height: 84upx;
border-radius: 5upx;
border: 2upx solid #FFFFFF;
margin: 8upx auto;
display: block;
}
.grmsg{
flex: 0 0 360upx;
}
.time{
flex: 0 0 180upx;
}
.box_cont{
overflow-x: hidden;
}
.box_cont .video{
width: 100%;
}
.box_cont .bigimg{
height: 360upx;
}
.box_bottom{
height: 60upx;
margin-top: 16upx;
display: flex;
}
.box_bottom .smavatar{
flex: 0 0 66%;
}
.smavatar image{
width: 54upx;
height: 54upx;
border: 2upx solid #FFFFFF;
border-radius: 100%;
}
.box_bottom .zanandpl{
flex: 0 0 36%;
display: flex;
}
.smingarr{
display: flex;
flex-wrap: wrap;
}
.smingarr .smimgcss{
flex: 1;
border-radius: 8upx;
margin: 1upx 2upx;
flex: 0 0 32%;
height: 220upx;
}
.smingarr .smimgcss image{
width: 100%;
height: 100%;
}
</style>
你们可以复制这段代码去厕所，在那个视频区域不能上下滚动页面
1***@qq.com (作者)
我把代码贴在下面了
2018-12-07 13:44