小程序瀑布流布局

青旅半醒 2021-09-17 12:14 435阅读 0赞

### 微信小程序开发交流qq群   581478349 ###

微信：

承接小程序开发

![70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

![20190104172225483.png][]

<scroll-view scroll-y="true" class="scoll-h">
            <view style=' display: flex;flex-direction: row;'>
              <view class='tab-content_for_border'>
                <block wx:for="{
       {arr_1}}" wx:key="*this">
                  <view class='tab-content_border'>
                    <view class='tab_content_border_border'>
                      <view>
                        <view style=' position: relative'>
                          <image wx:if='{
       {item.classid==1}}' src='/img/yinpin.png' class='tab-content_top_img'></image>
                          <image wx:if='{
       {item.classid==2}}' src='/img/shipin.png' class='tab-content_top_img'></image>
                          <image wx:if='{
       {item.classid==3}}' src='/img/tuwen.png' class='tab-content_top_img'></image>
                        </view>
                        <view style=' text-align:center '>
                          <image src='{
       {item.contnent_img}}' wx:if='{
       {item.classid==1}}' class='tab-content_img'></image>
                          <image src='{
       {item.contnent_img}}' wx:if='{
       {item.classid==2}}' mode="widthFix" class='tab-content_img1'></image>
                          <image src='{
       {item.contnent_img}}' wx:if='{
       {item.classid==3}}' mode="widthFix" class='tab-content_img2'></image>
                        </view>
                        <view class='tab-content_title'>{
       {item.content}}</view>
                        <view class='tab-content_head_border ' style=' position: relative;'>
                          <view class='tab-content_head_border'>
                            <image src='{
       {item.head_img}}' class='tab-content_head'></image>
                            <view style='margin-left:10rpx;'>{
       {item.name}}</view>
                          </view>
                          <view class='tab-content_like_border '>
                            <image src='/img/zan.png' class='tab_content_like '></image>
                            <view style='margin-left:10rpx'>{
       {item.like_num}}</view>
    
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </block>
              </view>
              <view class='tab-content_for_border'>
                <block wx:for="{
       {arr_2}}" wx:key="*this">
                  <view class='tab-content_border'>
                    <view class='tab_content_border_border'>
                      <view>
                        <view style=' position: relative'>
                          <image wx:if='{
       {item.classid==1}}' src='/img/yinpin.png' class='tab-content_top_img'></image>
                          <image wx:if='{
       {item.classid==2}}' src='/img/shipin.png' class='tab-content_top_img'></image>
                          <image wx:if='{
       {item.classid==3}}' src='/img/tuwen.png' class='tab-content_top_img'></image>
                        </view>
                        <view style=' text-align:center '>
                          <image src='{
       {item.contnent_img}}' wx:if='{
       {item.classid==1}}' class='tab-content_img'></image>
                          <image src='{
       {item.contnent_img}}' wx:if='{
       {item.classid==2}}' mode="widthFix" class='tab-content_img1'></image>
                          <image src='{
       {item.contnent_img}}' wx:if='{
       {item.classid==3}}' mode="widthFix" class='tab-content_img2'></image>
                        </view>
                        <view class='tab-content_title'>{
       {item.content}}</view>
                        <view class='tab-content_head_border ' style=' position: relative;'>
                          <view class='tab-content_head_border'>
                            <image src='{
       {item.head_img}}' class='tab-content_head'></image>
                            <view style='margin-left:10rpx;'>{
       {item.name}}</view>
                          </view>
                          <view class='tab-content_like_border '>
                            <image src='/img/zan.png' class='tab_content_like '></image>
                            <view style='  margin-left:10rpx '>{
       {item.like_num}}</view>
    
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </block>
              </view>
    
            </view>
          </scroll-view>

/* 循环外边框 */
    .tab-content_for_border{
      width: 100%;
     padding:10rpx;
    }
    /* 循环内边框 */
    .tab-content_border{
      font-size: 34rpx;
     background: #fff;
     margin-top: 20rpx;
    }
    .tab_content_border_border{
      font-size: 28rpx;
    }
    .tab-content_top_img{
     width: 50rpx;
     height: 30rpx;
     position: absolute;
     right: 20rpx;
     top: 20rpx;
     border-radius: 20rpx;
       -moz-box-shadow: 2px 2px 5px #333;
      -webkit-box-shadow: 2px 2px 5px #333;
      box-shadow: 2px 2px 5px #333;
    }
    /* 音频 */
    .tab-content_img{
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      margin-top: 30rpx;
    }
    /* 视频 */
    .tab-content_img1{
      width: 100%;
    }
    /* 图文 */
    .tab-content_img2{
      width:100%;
     
    }
    .tab-content_head_border{
      display: flex;
      flex-direction: row;
      font-size: 24rpx;
      line-height: 60rpx;
     padding: 10rpx;
    }
    
    
    .tab-content_head{
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }
    .tab-content_title{
      padding-top: 20rpx;
      padding: 20rpx;
      padding-bottom: 20rpx;
    }
    .tab_content_like{
      width: 30rpx;
      height: 30rpx;
      margin-top: 15rpx;
    }
    .tab-content_like_border{
      display: flex;
      flex-direction: row;
      position: absolute;
      right: 20rpx;
      top: 15rpx;
    }

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        content_list: [{
          contnent_img: '/img/Rotation_chart.jpg',
          content: '心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好',
          head_img: '/img/Rotation_chart.jpg',
          name: '小丫丫',
          like_num: '0',
          classid: 1
        }, {
          contnent_img: '/img/Rotation_chart.jpg',
          content: '心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好',
          head_img: '/img/Rotation_chart.jpg',
          name: '某某',
          like_num: '1',
          classid: 2
        }, {
          contnent_img: '/img/Rotation_chart.jpg',
          content: '心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好',
          head_img: '/img/Rotation_chart.jpg',
          name: '冷不过人心',
          like_num: '2',
          classid: 3
        }, {
          topimg: '/img/yinpin.png',
          contnent_img: '/img/Rotation_chart.jpg',
          content: '心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好心态好的人',
          head_img: '/img/Rotation_chart.jpg',
          name: '冷不过人心',
          like_num: '0',
          classid: 1
        }, {
          topimg: '/img/shipin.png',
          contnent_img: '/img/Rotation_chart.jpg',
          content: '心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好',
          head_img: '/img/Rotation_chart.jpg',
          name: '某某',
          like_num: '1',
          classid: 2
        }, {
          topimg: '/img/tuwen.png',
          contnent_img: '/img/Rotation_chart.jpg',
          content: '心态好的人，一辈子都好心态好的人，一辈子都好心态好的人，一辈子都好',
          head_img: '/img/Rotation_chart.jpg',
          name: '小丫丫',
          like_num: '2',
          classid: 3
        }, ],
    
    
      },
    
      onLoad: function() {
     
        var that = this;
        var arr_1 = [],
          arr_2 = [];
        var content_list = this.data.content_list;
       // 加载的时候把请求回来的数组分为两组
        for (var i = 0; i < content_list.length; i++) {
          console.log('content_list[i]:', i / 2)
          if (i % 2 == 1) {
            arr_2.push(content_list[i])
          } else {
            arr_1.push(content_list[i])
          }
        }
        this.setData({
          arr_1,
          arr_2
        })
        //  高度自适应
        wx.getSystemInfo({
          success: function(res) {
            var clientHeight = res.windowHeight,
              clientWidth = res.windowWidth,
              rpxR = 740 / clientWidth;
            var calc = clientHeight * rpxR - 70;
            console.log(calc)
            that.setData({
              winHeight: calc
            });
          }
        });
      },
    
    
    
    })

目前video组件层级最高，如果要评论的话只能让整个视频的高度调整一下，不然手机上到时候用不了，而且

标签cover-view里不能放input，所以没有什么更好的办法；

各位有更好的建议欢迎指点

有问题的朋友们可以加QQ群：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]

[70]: https://img-blog.csdn.net/20180922193022472?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/fc46bb4395c24a55b4d42b3f84124b42.png
[20190104172225483.png]: /images/20210724/022e9d3feef04b6aa7a14a2a90e04cdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: /images/20210724/c2bd0402702e4ce1873c736bc9d74dc8.png