怎么使用小程序实现轮播每次显示三条数据

本篇内容主要讲解“怎么使用小程序实现轮播每次显示三条数据”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用小程序实现轮播每次显示三条数据”吧!

页面布局

<!-- 统计过程控制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 -->

样式

.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;}

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'          })        }      }    })  },

效果图

到此，相信大家对“怎么使用小程序实现轮播每次显示三条数据”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！