小程序实现轮播每次显示三条数据

 更新时间:2022年06月24日 14:29:23   作者:那些年的笔记  
这篇文章主要为大家详细介绍了小程序实现轮播每次显示三条数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序轮播每次显示三条数据的具体代码,供大家参考,具体内容如下

1.页面布局

<!-- 统计过程控制s -->
              <view class='Lean_item'>
                <view class='Lean_container'>
                  <view class='Lean_item_title'>
                    <image class='Lean_item_title_pic' src='{{BaseURL}}/uploadFile/groupImages/greencross1.png'></image>
                    <view class='Lean_item_title_name'>统计过程控制</view>
                    <view class='Lean_item_title_more'>更多>></view>
                  </view>
                  <view wx:if='{{listSPCOrganizationAbnormity.length>0}}'>
 
                    <swiper class='statistics_list' indicator-dots="{{indicatorDots1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" vertical="{{vertical}}" circular="{{circular}}">
                      <block wx:for="{{listSPCOrganizationAbnormity}}" wx:key="unique" wx:for-item="items">
                        <swiper-item>
                          <block wx:for="{{items}}" wx:key="unique">
                            <view class='statistics_item'>
                              <view class='statistics_item_time'>{{item.operateTime}}</view>
                              <view class='statistics_item_name'>{{item.name}}</view>
                              <view class='statistics_item_name'>{{item.value}}{{item.unit}}</view>
                              <view class='statistics_item_name'>{{item.stateName}}</view>
                            </view>
                          </block>
                        </swiper-item>
                      </block>
                    </swiper>
                  </view>
                  <view wx:else>
                <view class='statistics_no_list'>蓝控参数运行正常</view>
              </view>
        </view>
  </view>
<!-- 统计过程控制e -->

2.样式

.Lean_item {
  width: 100%;
  height: auto;
  float: left;
  background-color: #fff;
  border-radius: 10rpx;
  margin-top: 20rpx;
  padding: 10rpx 0rpx;
  box-shadow: 0px 0px 5px rgba(226, 226, 226, 0.911);
}
 
.Lean_container {
  width: calc(100% - 40rpx);
  height: auto;
  float: left;
  margin-left: 20rpx;
}
 
.Lean_item_title {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px solid #f2f2f2;
  position: relative;
}
 
.Lean_item_title_pic {
  height: 30rpx;
  width: 30rpx;
  float: left;
  margin-top: 25rpx;
}
 
.Lean_item_title_name {
  color: #2c3444;
  font-size: 15px;
  font-weight: 800;
  float: left;
  margin-left: 10rpx;
}
 
.Lean_item_title_more {
  color: #4f5760;
  font-size: 11px;
  float: right;
}
 
.statistics_list {
  width: 100%;
  display: flex;
  height: 260rpx;
  flex-wrap: wrap;
}
 
.statistics_no_list {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  flex-wrap: wrap;
}
 
.statistics_item {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
.statistics_item_time {
  padding: 0rpx 10rpx;
  height: 80rpx;
}

3.js

/**获取统计过程控制 */
  getSPCOrganizationAbnormity: function() {
    var that = this;
    wx.request({
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: 'GET',
      url: app.globalData.BaseURL + 'group/v1/getSPCOrganizationAbnormity.html',
      data: {
        organizationID: that.data.defaultOrgID,
      },
      success: function(res) {
        console.log("获取统计过程控制", res.data)
        var status = res.data.status;
        var info = res.data.info;
        if (status.indexOf("SUCCESS") == 0) {
          var big = res.data.info;
          var length = big.length;
          var num = parseInt(length / 3);
          var arr = [];
          for (var i = 0; i < num; i++) {
            var ar = [];
            for (var j = 0; j < 3; j++) {
              ar.push(big[j])
            }
            arr.push(ar)
          }
          if (length % 3 != 0) {
            var ar = []
            for (var k = (num * 3); k < length; k++) {
              ar.push(big[k])
            }
            arr.push(ar)
          }
          that.setData({
            listSPCOrganizationAbnormity: arr
          })
        } else {
          wx.showToast({
            title: res.data.info,
            icon: 'none'
          })
        }
      }
    })
  },

4.效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js如何给json对象添加、删除、修改属性

    js如何给json对象添加、删除、修改属性

    这篇文章主要介绍了js如何给json对象添加、删除、修改属性问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 微信小程序图表插件wx-charts用法实例详解

    微信小程序图表插件wx-charts用法实例详解

    这篇文章主要介绍了微信小程序图表插件wx-charts用法,结合实例形式较为详细的总结分析了微信小程序图表插件wx-charts的功能、常见用法及相关操作注意事项,需要的朋友可以参考下
    2019-05-05
  • 跟我学习javascript的垃圾回收机制与内存管理

    跟我学习javascript的垃圾回收机制与内存管理

    跟我学习javascript的垃圾回收机制与内存管理,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript实现将xml转换成html table表格的方法

    JavaScript实现将xml转换成html table表格的方法

    这篇文章主要介绍了JavaScript实现将xml转换成html table表格的方法,实例分析了javascript操作XML文件与table表格的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • swiper动态改变滑动内容的实现方法

    swiper动态改变滑动内容的实现方法

    假设当前显示的是1,往左滑动一个递减1,往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法,感兴趣的朋友一起看看吧
    2018-01-01
  • ES6新增数据结构WeakSet的用法详解

    ES6新增数据结构WeakSet的用法详解

    WeakSet和Set类似,同样是元素不重复的集合,它们的区别是WeakSet内的元素必须是对象,不能是其它类型。接下来通过本文给大家详细介绍ES6新增数据结构WeakSet的用法,感兴趣的朋友一起看看吧
    2017-08-08
  • js改变style样式和css样式的简单实例

    js改变style样式和css样式的简单实例

    下面小编就为大家带来一篇js改变style样式和css样式的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JavaScript比较同一天的时间大小实例代码

    JavaScript比较同一天的时间大小实例代码

    在项目开发中,经常会遇到同一天内的时间大小比较,下面小编给大家带来了JavaScript比较同一天的时间大小实例代码,需要的朋友参考下
    2018-02-02
  • js防止页面被iframe调用的方法

    js防止页面被iframe调用的方法

    这篇文章主要介绍了js防止页面被iframe调用的方法,可防止页面被别的网站iframe调用,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • js判断文件类型大小并给出提示的实现方法

    js判断文件类型大小并给出提示的实现方法

    下面小编就为大家分享一篇js判断文件类型大小并给出提示的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01

最新评论