iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序实现轮播每次显示三条数据
  • 675
分享到

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

2024-04-02 19:04:59 675人浏览 独家记忆
摘要

本文实例为大家分享了小程序轮播每次显示三条数据的具体代码,供大家参考,具体内容如下 1.页面布局 <!-- 统计过程控制s -->               <v

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

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.效果图

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

--结束END--

本文标题: 小程序实现轮播每次显示三条数据

本文链接: https://www.lsjlt.com/news/152544.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 小程序实现轮播每次显示三条数据
    本文实例为大家分享了小程序轮播每次显示三条数据的具体代码,供大家参考,具体内容如下 1.页面布局 <!-- 统计过程控制s -->               <v...
    99+
    2024-04-02
  • 怎么使用小程序实现轮播每次显示三条数据
    本篇内容主要讲解“怎么使用小程序实现轮播每次显示三条数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用小程序实现轮播每次显示三条数据”吧!页面布局<!-- 统计过程控制s...
    99+
    2023-07-02
  • 小程序实现轮播图
    本文实例为大家分享了小程序实现轮播图的具体代码,供大家参考,具体内容如下 那个先上效果: step1:页面index.wxml代码 <!-- 轮播 --> <sw...
    99+
    2024-04-02
  • 微信小程序实现轮播图指示器
    本文实例为大家分享了微信小程序实现轮播图指示器的具体代码,供大家参考,具体内容如下 1.文件目录 2.轮播图页面布局 需求:自定义轮播指示器:当轮播图发生变化时,自定义轮播指示器跟...
    99+
    2024-04-02
  • 小程序怎么实现轮播图
    这篇文章主要介绍“小程序怎么实现轮播图”,在日常操作中,相信很多人在小程序怎么实现轮播图问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序怎么实现轮播图”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!使用...
    99+
    2023-06-26
  • 微信小程序中的轮播图实现示例
    目录1.scroll-view 组件的基本使用2.swiper 和 swiper-item 组件的基本使用3.text 组件的基本使用4.rich-text 组件的基本使用1.scr...
    99+
    2022-12-22
    小程序轮播图 微信小程序轮播图
  • 怎么用小程序实现轮播图
    这篇文章主要讲解了“怎么用小程序实现轮播图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用小程序实现轮播图”吧!那个先上效果:step1:页面index.wxml代码<!--&nb...
    99+
    2023-07-02
  • 微信小程序如何实现轮播图指示器
    这篇文章主要讲解了“微信小程序如何实现轮播图指示器”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序如何实现轮播图指示器”吧!1.文件目录2.轮播图页面布局需求:自定义轮播指示器:当轮...
    99+
    2023-07-02
  • 微信小程序开发实现轮播图
    小程序,移动端离不开轮播图的功能,下面就写一个小程序的轮播图功能分享给大家 效果图: 1.页面代码 <!--index.wxml--> <view class="...
    99+
    2024-04-02
  • 小程序中轮播图u-swiper图片无法显示问题
    问题:uview官网中 指定的图片路径字段为image,完全按照uview写轮播图却无法正常显示。    解决方法:1.把image字段改成url字段 给u-swiper加上 keyName="image" 最后找到了总结原因:npm下载...
    99+
    2023-09-13
    小程序 前端
  • 微信小程序中如何实现轮播图
    这篇文章主要介绍了微信小程序中如何实现轮播图,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。业务需求:5个图片轮番播放,可以左右滑动,点击指示...
    99+
    2024-04-02
  • 微信小程序实现轮播图(适配机型)
    本文实例为大家分享了微信小程序实现轮播图的具体代码,供大家参考,具体内容如下 1、wxss样式: .showTableBox {     position: relative;  ...
    99+
    2024-04-02
  • 微信小程序开发怎么实现轮播图
    这篇文章主要讲解了“微信小程序开发怎么实现轮播图”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序开发怎么实现轮播图”吧!效果图:页面代码<!--index.wxml-->...
    99+
    2023-07-02
  • 微信小程序如何使用swiper组件实现图片轮播切换显示功能
    这篇文章将为大家详细讲解有关微信小程序如何使用swiper组件实现图片轮播切换显示功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:1、效果展示2、关键代码in...
    99+
    2024-04-02
  • 使用微信小程序实现图片轮播特效
    使用微信小程序实现图片轮播特效引言:随着智能手机的普及,微信成为了我们每天使用最频繁的app之一。微信小程序作为微信生态系统中的一部分,提供了一种快速开发和发布应用程序的方式。图片轮播特效不仅可以为应用程序增添动感和美观,还可以提升用户体验...
    99+
    2023-11-21
    图片轮播 微信小程序 特效
  • 微信小程序实现轮播图标题跑马灯
    本文实例为大家分享了微信小程序实现轮播图标题跑马灯的具体代码,供大家参考,具体内容如下 微信小程序做轮播图,轮播图下的标题如果不长不需要跑马灯效果,过长的无法显示全的则添加跑马灯效果...
    99+
    2024-04-02
  • 微信小程序中怎么实现轮播图效果
    这篇文章主要介绍了微信小程序中怎么实现轮播图效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。先来看看效果图:主要用swiper + swi...
    99+
    2024-04-02
  • 微信小程序如何实现使用table显示数据库反馈的多条数据功能
    小编给大家分享一下微信小程序如何实现使用table显示数据库反馈的多条数据功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体...
    99+
    2024-04-02
  • 在小程序中如何实现3d裸眼轮播效果
    小编今天带大家了解在小程序中如何实现3d裸眼轮播效果,文中知识点介绍的非常详细。觉得有帮助的朋友可以跟着小编一起浏览文章的内容,希望能够帮助更多想解决这个问题的朋友找到问题的答案,下面跟着小编一起深入学习“在小程序中如何实现3d裸眼轮播效果...
    99+
    2023-06-26
  • 使用微信小程序实现轮播图切换效果
    使用微信小程序实现轮播图切换效果微信小程序是一种轻量级的应用程序,具有简单、高效的开发和使用特点。在微信小程序中,实现轮播图切换效果是常见的需求。本文将介绍如何使用微信小程序实现轮播图切换效果,并给出具体的代码示例。首先,在微信小程序的页面...
    99+
    2023-11-21
    轮播图 微信小程序 切换效果
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作