微信小程序截取数组每三个为一组渲染
时间:2022-07-24
本文章向大家介绍微信小程序截取数组每三个为一组渲染,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
后端将一个数组传给我们,需求要把它们进行切割在进行展示,还有自定义swiper指示点,都会在代码里进行输写
data:{
currentSwiper: 0,
recom_list: [{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
},
{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
},
{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
},
{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
},
{
avatar: 'https://sucai.suoluomei.cn/sucai_zs/images/20191121093322-1.png',
name: '小禾',
college: '圣迪斯哥美容博士',
praise: '666',
advisory: '999'
}
],
}
//切割数组
onLoad(){
this.getrecom()
}
getrecom() {
var result = []
for (var i = 0; i < this.data.recom_list.length; i += 3) {
result.push(this.data.recom_list.slice(i, i + 3));
}
this.setData({
recom_list: result
})
console.log(this.data.recom_list)
},
// 通过下标改变指示点
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},
<view class="carousel">
<swiper class="swiper" bindchange="swiperChange">
<swiper-item wx:for="{{recom_list}}" wx:for-item="item" wx:for-index="index" wx:key>
<view class="info" wx:for="{{item}}" wx:for-item="row" wx:for-index="i" wx:key>
<view class="avatar">
<image src="{{row.avatar}}"></image>
</view>
<view class='row'>
<view class="title">{{row.name}}</view>
<view class='col'>{{row.college}}</view>
<view class="bottom">
<view>好评数:{{row.praise}}</view>
<view>咨询量:{{row.advisory}}</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<!--自定义指示点-->
<view class="dots">
<block wx:for="{{recom_list}}" wx:key>
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
- React第三方组件4(状态管理之Reflux的使用⑤异步操作)
- Leetcode-Easy 804. Unique Morse Code Words
- JavaScript设计模式与开发实践 - 策略模式
- 二叉树的深度
- [html5] (Notification) 桌面通知
- React第三方组件4(状态管理之Reflux的使用④TodoList下)
- Leetcode-Easy 155. Min Stack
- Leetcode-Easy 72. Edit Distance
- React第三方组件4(状态管理之Reflux的使用③TodoList中)
- Leetcode-Easy21. Merge Two Sorted ListsDefinition for singly-linked list.class ListNode:def init(sel
- Burp Suite详细使用教程-Intruder模块详解
- 逆元的三种解法(附详细证明)
- JavaScript设计模式与开发实践 - 单例模式
- Leetcode-Easy 141. Linked List Cycle
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- jQuery 效果
- jQuery 属性操作
- jQuery 文本属性值
- 10.4【前端开发】页面布局:如何理解 “CSS 视觉格式化模型”?
- Android Material UI控件之ShapeableImageView
- jQuery 元素操作
- jQuery 事件注册和事件处理
- 10.5 块级盒子模型(原盒子模型):两种盒子有什么不同?
- Android Material UI控件之MaterialButton
- jQuery (事件、拷贝)对象
- 10.6 border-color简写属性:如何理解四值语法?
- jQuery 插件
- dotnet 基于 dotnet format 的 GitHub Action 自动代码格式化机器人
- 10.7 border-width边框粗细:outline与border有什么不同?
- WPF 非客户区的触摸和鼠标点击响应