案例:

其中最重要的思路就是如何让第二次或第三次以及后面的轮播有数据:

做法大致跟轮播图做法一样,只不过我们需要进行书写样式,代码如下:

<!-- 做一个轮播图navbar demo -->
<view class="navBar">
<swiper class="swiNav" indicator-dots="{{true}}" indicator-color="#ccc">
<block wx:for="{{navList}}" wx:key="index" wx:for-item="item">
<swiper-item class="itemNav" >
<view class="nav" wx:for="{{item}}" wx:for-item="citem" wx:key="index">
<!-- -->
<image class="icon" src="{{citem.imgUrl}}"></image>
<!-- {{item.imgUrl}} -->
<view class="name">{{citem.name}}</view>
<!-- {{item.name}} -->
</view>
</swiper-item>
</block>
</swiper>
</view>
page {
padding: 20rpx;
box-sizing: border-box;
}
.swiNav {
width: 100%;
height: 300rpx;
}
.swiNav .itemNav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.swiNav .itemNav .nav {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 120rpx;
width: 20%;
}
.swiNav .itemNav .nav .icon {
width: 80rpx;
height: 80rpx;
}
.swiNav .itemNav .nav .name {
font-size: 30rpx;
}
// pages/supply/index.js
Page({ /**
* 页面的初始数据
*/
data: {
current:1,
navList:[
{
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
}, {
name: "旅行",
imgUrl: "http://oss.saas.qzdcloud.com/1015685380629867520.jpg",
},
] },
getList(){
let list= this.data.navList;
let pageNum = 10; //我们需要的数据要多少条
let index = 0; //切割数据的位置
let navList=[];
if(list.length>pageNum){ //这里说明数组的长度比我们需要的数据要多
while(index < list.length){//说明还有数据可以切割。如果大于了。那么在index的位置则没有数据了
navList.push(list.slice(index, index += pageNum))
}
this.setData({
navList
})
return
}else{
this.setData({
navList: list
})
return
}
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getList()
console.log(this.data.navList);
},

小程序或者vue,解决菜单导航做做成轮播的样子的更多相关文章

  1. 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  2. 微信小程序弹出操作菜单

    微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...

  3. 小程序多级下拉菜单demo

    小程序多级下拉菜单demo - CSDN博客 https://blog.csdn.net/github_39371177/article/details/80251211

  4. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  5. 小程序clearinterval无效解决

    小程序clearinterval无效解决 小程序clearinterval清除定时器无效,原因是定时器使用与清除方法不对导致的,我们应将定时器绑定变量,这样在关闭页面清空定时器clearinterva ...

  6. 只会Vue怎么开发小程序?vue和微信小程序的到底有哪些区别?

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张生命周期图对比下: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. v ...

  7. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  8. 微信小程序开发之自定义菜单tabbar

    做这个 遇到问题比较多,特此记录以便查看,直接上代码: 一.app.js 控制原有菜单隐藏.启用新菜单.菜单列表,集中在这里控制 hideTabBar这个很关键,解决苹果6S导致的双导航栏:原文htt ...

  9. 微信小程序 WXS实现json数据需要做过滤转义(filter)

    前言 最近有在做小程序开发,在开发的过程中碰到一点小问题,描述一下先. 本人在职的公司对于后台获取的 json 数据需要做过滤转义的很多,不同的状态码会对应不同的文字,但是在微信小程序中又没有类似 v ...

随机推荐

  1. JAVA实现websocket客户端

    pom依赖 <dependency> <groupId>org.java-websocket</groupId> <artifactId>Java-We ...

  2. Flutter学习(9)——Flutter插件实现(Flutter调用Android原生

    原文地址: Flutter学习(9)--Flutter插件实现(Flutter调用Android原生) | Stars-One的杂货小窝 最近需要给一个Flutter项目加个apk完整性检测,需要去拿 ...

  3. 【九度OJ】题目1118:数制转换 解题报告

    [九度OJ]题目1118:数制转换 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1118 题目描述: 求任意两个不同进制非 ...

  4. 【九度OJ】题目1170:找最小数 解题报告

    [九度OJ]题目1170:找最小数 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1170 题目描述: 第一行输入一个数n,1 < ...

  5. 【LeetCode】939. Minimum Area Rectangle 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 确定对角线,找另外两点(4sum) 字典保存出现的x ...

  6. 【LeetCode】655. Print Binary Tree 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS BFS 日期 题目地址:https://le ...

  7. 【LeetCode】91. Decode Ways 解题报告(Python)

    [LeetCode]91. Decode Ways 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fux ...

  8. 1193 - Dice (II)

    1193 - Dice (II)    PDF (English) Statistics Forum Time Limit: 3 second(s) Memory Limit: 32 MB You h ...

  9. zbar解析二维码demo

    开发环境;ubuntu 18.04 IDE:clion 2019 源文件.cpp #include <opencv2/opencv.hpp> #include <zbar.h> ...

  10. 实践剖析.NET Core如何支持Cookie和JWT混合认证、授权

    前言 为防止JWT Token被窃取,我们将Token置于Cookie中,但若与第三方对接,调用我方接口进行认证.授权此时仍需将Token置于请求头,通过实践并联系理论,我们继续开始整活!首先我们实现 ...