div中只有一张图片时，底部会有空白，需要加lineheight:0

最新推荐文章于 2023-12-01 17:02:03 发布

扬州的你

最新推荐文章于 2023-12-01 17:02:03 发布

阅读量215

点赞数

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/jtpython666/article/details/116278223

uniapp 专栏收录该内容

9 篇文章

订阅专栏

div中只有一张图片时，底部会有高度，使得底部会有空白，需要加lineheight:0，子元素中还必须加入lineheight:normal,不然子元素会受到影响

<template>
  <view class="" v-if="data">
    <uni-grid :column="2" :square="false" :showBorder="false">
    	<uni-grid-item v-for="(item,index) in data.list" :key="index">
			<view class="item" :style="{marginLeft:index%2==0?'10rpx':'5rpx'}" style="width: 360rpx;margin-left: 10rpx;">
				<view style="position: relative;border-radius: 4px;overflow: hidden;line-height: 0;">
					<image :src="item.roomSrc" mode="" style=" width: 360rpx;height: 220rpx;"></image>
					<text style="background-color: rgba(0,0,0,0.3); position: absolute;right: 0rpx;top:0; color: white;font-size: 24rpx;padding: 3px;line-height:normal;">{{item.hn}}</text>
					<view class="" style="font-size: 20rpx; display: flex;align-items:center; position:absolute; background-color: rgba(0,0,0,0.3);padding: 3px; left: 0rpx;bottom:10rpx; color: white;">
						<image :src="item.avatar" mode="" style="width: 30rpx;height: 30rpx;"></image>
					    <text >{{item.nickname}}</text>
					</view>
				</view>
				<view class="">
					<text>{{item.roomName}}</text>
				</view>
			</view>
		</uni-grid-item>
    	
    </uni-grid>
  </view>
</template>

<script>


export default {
  name: '',
  data () {
    return {
      href:'https://m.douyu.com/api/room/list',
	  data:null
    }
  },
  mounted() {
  	this.getData()
  },
  methods:{
   getData(){
	   uni.request({
	   	url:this.href,
		method:"GET",
		data:{type:'LOL',page:1},
		success: (res) => {
			console.log(res)
			this.data=res.data.data
		}
	   })
   }
  }
}
</script>

<style lang="less" scoped>

</style>
e: 20rpx; display: flex;align-items:center; position:absolute