微信小程序-带图列表

index.wxml

<!-- 礼品列表 -->
<view class='giftListView'>
 <button class='all'>
    <!-- cell 1-->
    <view class='item'>
      <!-- 产品图片 -->
      <view class='iconImageView'>
        <image class='iconImage' src="../../image/vae_tool_logo.jpg" mode='aspectFit'></image>
      </view>
      <!-- 产品名称 -->
      <view class='productView'>
        <text class='productNameText'>口罩头像生成</text>
        <text class = 'productDesText'>生成带有口罩的头像 预防新冠肺炎</text>
      </view>
      <!-- 具体产品 -->
      <!-- <view class='productDesView'>
        
      </view> -->
    </view>
  </button>

  <button class='all'>
    <!-- cell 2-->
    <view class='item'>
      <!-- 产品图片 -->
      <view class='iconImageView'>
        <image class='iconImage' src="../../image/vae_tool_logo.jpg" mode='aspectFit'></image>
      </view>
      <!-- 产品名称 -->
      <view class='productView'>
        <text class='productNameText'>国旗头像生成</text>
        <text class = 'productDesText'>生成带有国旗的头像 华诞70年</text>
      </view>
      <!-- 具体产品 -->
      <!-- <view class='productDesView'>
        
      </view> -->
    </view>
  </button>

</view>

index.wxss

/* pages/home/home.wxss */

.all {
  margin-left: 10px; 
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}

/* 功能列表 */
.giftListView {
  width: 100%;
  /* left: 10rpx;
  right: 10rpx; */
  padding: 80rpx, 80rpx, 80rpx, 80rpx; 
  bottom: 10rpx;
  top: 10rpx;
  /* background-color: red; */
  position:fixed;
}
/* cell */
.item {
  width: 100%;
  height: 200rpx;
  position: relative;
  /* background-color: green; */
  /* border-bottom: 0px solid #dadada; */
 
}
/* cell 产品图 */
.iconImageView {
  width: 100rpx;
  height: 100rpx;
  top: 40rpx;
  left: 20rpx;
  /* background-color:orange; */
  position: absolute;
}
.iconImage {
  width: 120rpx;
  height: 120rpx;
}

/* 功能View */
.productView {
  top: 25rpx;
  left: 180rpx;
  /* right: 130rpx; */
  height: 50rpx;
  position: absolute;
  text-align: justify;

}
.productNameText {
  color: rgb(32, 27, 27);
  font-size: 35rpx;
  display: block;
  white-space: nowrap;
  text-overflow:ellipsis;
  height: 70rpx;
}

.productDesText {
  font-size: 30rpx;
  color: gray;
  display: block;
  /* line-height: 50rpx; */
   /* overflow: hidden; */
  text-overflow: ellipsis;
  white-space: nowrap;
   -webkit-line-clamp:1; 
}

 

来源：CSDN

作者：木尧大兄弟

链接：https://blog.csdn.net/muyao987/article/details/104102606