小程序自适应瀑布流列表

最新推荐文章于 2025-05-27 10:42:45 发布

Sole Memory°

最新推荐文章于 2025-05-27 10:42:45 发布

阅读量410

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/Sole_Memory1/article/details/108444369

小程序专栏收录该内容

2 篇文章

订阅专栏

<view class='content'  >
	<!-- 左边 -->
	<view class="left" >  
		<view class='item' wx:for="{{ProductionList}}" wx:if="{{index%2==0}}">
		  <image class="image" mode="center" lazy-load  src="{{ ProductionList.mbr_Pic }}" data-src="{{ProductionList.mbr_Pic}}" >
		    <!-- 图片上的数量 -->
		    <view class="productionNumder">
		      <view class="productionNumderFont" wx:if="{{ ProductionList.picNum }}">{{ ProductionList.picNum }} P</view> 
		    </view>
		  </image>
		  <view class='item-text-view title-text' >
		    {{ProductionList.Title}}
		  </view>
		  <!-- --- -->
		  <view class="contenIcon">
		    <view style="display: flex;">
		    	 <!--浏览量 --- -->
		      <view class="contenIcon-view"  >
		        <van-icon name="eye-o" size="28rpx" />
		        <view  wx:if="{{ ProductionList.ViewNum }}">{{ ProductionList.ViewNum }}</view>
		      </view>
		       <!--点赞数 --- -->
		      <view class="contenIcon-view">
		        <van-icon name="good-job-o" /> 
		        <view wx:if="{{ ProductionList.UpNum }}">{{ ProductionList.UpNum }}</view>
		      </view>
		       <!--评论量 --- -->
		      <view class="contenIcon-view">
		        <van-icon name="chat-o" /> 
		        <view wx:if="{{ ProductionList.ReviewNum }}">{{ ProductionList.ReviewNum }}</view>
		      </view>
		    </view>
		  </view>
		  <!-- 头像 -->
		  <view class='item-text-view item-text-view1'>
		    <van-image round width="30rpx" height="30rpx"  src="{{ ProductionList.mbrPic }}"/>
		    <view class="item-text" >{{ProductionList.firstname}}</view> 
		  </view>
		</view>
	</view>
	 <!-- 右边 -->
	<view class="right" >  
		<view class='item' wx:for="{{ProductionList}}" wx:if="{{index%2==1}}">
		  <image class="image" mode="center" lazy-load  src="{{ ProductionList.mbr_Pic }}" data-src="{{ProductionList.mbr_Pic}}" >
		    <!-- 图片上的数量 -->
		    <view class="productionNumder">
		      <view class="productionNumderFont" wx:if="{{ ProductionList.picNum }}">{{ ProductionList.picNum }} P</view> 
		    </view>
		  </image>
		  <view class='item-text-view title-text' >
		    {{ProductionList.Title}}
		  </view>
		  <!-- --- -->
		  <view class="contenIcon">
		    <view style="display: flex;">
		    	 <!--浏览量 --- -->
		      <view class="contenIcon-view"  >
		        <van-icon name="eye-o" size="28rpx" />
		        <view  wx:if="{{ ProductionList.ViewNum }}">{{ ProductionList.ViewNum }}</view>
		      </view>
		       <!--点赞数 --- -->
		      <view class="contenIcon-view">
		        <van-icon name="good-job-o" /> 
		        <view wx:if="{{ ProductionList.UpNum }}">{{ ProductionList.UpNum }}</view>
		      </view>
		       <!--评论量 --- -->
		      <view class="contenIcon-view">
		        <van-icon name="chat-o" /> 
		        <view wx:if="{{ ProductionList.ReviewNum }}">{{ ProductionList.ReviewNum }}</view>
		      </view>
		    </view>
		  </view>
		  <!-- 头像 -->
		  <view class='item-text-view item-text-view1'>
		    <van-image round width="30rpx" height="30rpx"  src="{{ ProductionList.mbrPic }}"/>
		    <view class="item-text" >{{ProductionList.firstname}}</view> 
		  </view>
		</view>
	</view>
</view>

.content{
  margin: 0.5%;
  /* column-count: 2; */
  /* column-gap: 0;   */
  text-align: justify;
}
.left,.right{
  display: inline-block;
  vertical-align: top;
  width: 49.5%;
}
.item{
  width: 96%;
  /* height: auto; */
  background-color: #fff;
  vertical-align: top;
  margin-left:  2%;
  margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
  display: inline-block;
  box-shadow: 1rpx 2rpx 2rpx 1rpx rgb(199, 198, 198);
  border-radius: 5%;
  overflow: hidden;
}
.van-image {
  display: inline-block;
}
.item-text-view{
  display: flex;
  font-size: 20rpx;
  /* color: rgb(80, 79, 79); */
  color: #000;
  height: 40rpx;
  padding-left: 20rpx;
  line-height: 40rpx;
}
.item-text-view1 {
  border-top: 1rpx solid #eee;
  padding-top: 8rpx;
}
.title-text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding-right: 30rpx;
}
.image {
  width: 100%;
  margin:0 auto;
  position: relative;
}
.item-text {
  display: inline-block;
  font-size: 18rpx;
  color: rgb(80, 79, 79);
  margin-left: 10rpx;
  height: 40rpx;
  line-height: 30rpx;
}
/* 点赞数查看数评论数 */
.contenIcon {
  display: flex;
  justify-content: space-between;
  font-size: 20rpx;
  color: rgb(153, 152, 152);
  margin: 0 0 5rpx 10rpx;
}
.contenIcon-view {
  margin:0 10rpx;
  display: flex;  
}
/* <!-- 图片上的数量 --> */
.productionNumder {
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 20rpx;
  right: 10rpx;
  /* width: 70rpx; */
  /* height: 40rpx; */
  padding:0  10rpx;
  line-height: 35rpx;
  border-radius: 6rpx;
  font-size: 20rpx;
  background:rgba(5, 5, 5, 0.3);
  color: #fff;
  vertical-align: middle;
}
.productionNumderFont {
  vertical-align: middle;
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 作品列表
    ProductionList: [],
  },

 // 获取精选作品列表
requestProductionList: async function() {
  var params = JSON.stringify({
    "SessionId":"",
    "Version":2,
    "Command":{
      "HOTPRODUCTS":{
        "Types":"Month",
        "page":1,
        "page_count":"4"
      }
    }
  })
  let res = await httpRequestPost(httpURL.BASE_URL, params, "HOTPRODUCTS").catch(err => err)
  console.log(res)
  if (res.Result == 1) {
    this.setData({
      ProductionList:res.Data.list
    })
  } 
  console.log(this.data.ProductionList)
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    	this.requestProductionList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})