小程序轮播图显示三个数据

//专家团队

getZhuanjia: function () {

var that = this;

app.util.request({

"url": "entry/wxapp/YuZhuanjia",

success: function (res) {

var big = res.data.data;

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({

expert: arr

})

// WxParse.wxParse(‘jianjie‘, ‘html‘, res.data.data.z_jianjie, that, 5);

}

})

},

<view class=‘bsbb p30 bgcf‘>

<swiper class=‘h500‘ current=‘{{current}}‘ bindchange=‘nav‘>

<block wx:for="{{expert}}" wx:key="unique" wx:for-item="items">

<swiper-item class="bsbb pt30 pb30">

<view class=‘df‘>

<block wx:for="{{items}}" wx:key="unique">

<view class=‘df fdc aic jcc mr30‘ data-z_id="{{item.z_id}}" bindtap=‘doctorDetailClick‘>

<view class=‘pr‘>

<view>

<image mode=‘widthFix‘ style=‘width:210rpx;‘ src=‘../images/doctor_bg.png‘></image>

</view>

<view class=‘pa doctor-img w df aife jcfe‘>

<image mode=‘widthFix‘ src=‘{{item.z_thumbs}}‘></image>

</view>

</view>

<view class=‘fs32 c6 mt20‘>{{item.z_name}}</view>

<view class=‘fs24 c6 fw3 mt10‘>{{item.z_zhicheng}}</view>

<view>

<button class=‘bdn bdc_sec c_sec fs24 fw3 h40 mt10‘>详细了解</button>

</view>

</view>

</block>

</view>

</swiper-item>

</block>

</swiper>

<view class=‘df aic jcc‘>

<block wx:for="{{expert}}" wx:key="unique">

<view class=‘cir mr20 bdr50 {{current == index ? "bgc_sec":"bgceb"}}‘></view>

</block>

</view>

</view>

原文地址:https://www.cnblogs.com/isuansuan/p/9888541.html

时间: 2024-08-30 01:37:41

小程序轮播图显示三个数据的相关文章

图解微信小程序---轮播图

图解微信小程序---轮播图 第一步:在页面创建swiper组件 第二步:编写js页面 注意事项:wx:for渲染我们js中的图片数组,item默认写法,获取我们的图片数组中的图片,可通过增加wx:for-item="it"来改变默认的item名 优化 原文地址:https://www.cnblogs.com/cainiao-chuanqi/p/11604314.html

小程序轮播图部分

轮播图 <view class="swiper-container"> <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange" current="{{swiperCurrent}}" style="heig

微信小程序轮播图

我们开发web页面的时候,无论是图片还是模块,很多时候会用到轮播,那么下面是微信小程序的轮播功能,也是小程序自带的swiper轮播功能. 下面是轮播展示图: 熟悉一下swiper配置属性,这里的配置属性和我们平时用的轮播插件配置属性差别不大:(点击查看微信小程序开发文档) 首先是在wxml文件中加入swiper模块(我这里是把内容模块循环出来的): <swiper class='swiper' indicator-dots='true' autoplay='true' interval='300

微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-dots:是否显示面板指示点 autoplay:是否自动切换 interval:自动切换时间间隔 circular:是否采用衔接滑动 duration:滑动动画时长 更多属性请查看官网 <swiper indicator-dots="{{indicatorDots}}" autopla

小程序-轮播图案例

为了方便我以后项目的使用 wxml: autoplay="true"自动播放 circular="true"   采用协接滑动 indicator-dots="true"   显示圆点 indicator-color="#ff0000" 圆点颜色红色 indicator-active-color="#fff"   圆点激活白色 <swiper class='IMGbox' autoplay="

小程序轮播图

html部分 <view class="container"> <view class="swiper"> <swiper indicator-dots="{{indicatorDots}} autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:

小程序轮播图中间大两边小

不说这么多,直接上代码 <swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" autoplay="{{yearOutoplay}}" current="0" circular='true' bindchange="yearSwiperChange" > <block wx:for

小程序 轮播图 swiper 使用

个人示例 <swiper autoplay="true" indicator-dots="{{true}}" class="ad-swiper" indicator-color="rgba(255, 255, 255, .5)" indicator-active-color="#FFF"> <block wx:for="{{advertisements}}" wx:ke

小程序切换轮播图显示空白的问题

技术栈,taro编译的小程序,场景: 首页几个tab切换,默认第一个tab轮播图有数据,切换的时候后面的轮播图有的时候显示空白,请看: 首先父组件到子组件的值传过来了,自组件img src路径也有值,复制出来地址浏览器,显示没问题,路径问题排除 第一个tab三张轮播图,第二个两张轮播图,其他的tab都是一张,每个tab都从 数组形式传值过来的.有数据这是怎么回事,于是翻翻小郑许官网看到这 https://developers.weixin.qq.com/miniprogram/dev/compo