微信小程序顶部可滚动导航效果


Posted in Javascript onOctober 31, 2017

需求是小程序做头部做导航分类的效果

微信小程序顶部可滚动导航效果

顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用

<scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%">
 <view wx:for="{{classify}}" wx:key="id" data-type="{{item.id}}" class="scroll-view-item_H {{curTab==item.id?'sv-item-on':'sv-item-off'}}" bindtap="classifyClick">
  {{item.name}}
 </view>
</scroll-view>
 <block wx:if="{{curTab ==0}}"> <include src="recommend.wxml"/> </block>
 <block wx:elif="{{curTab==1}}"> <include src="fuli.wxml"/> </block>
 <block wx:elif="{{curTab==2}}"> <include src="other.wxml"/> </block>
 <block wx:elif="{{curTab==3}}"> <include src="other.wxml"/> </block>
 <block wx:elif="{{curTab==4}}"> <include src="other.wxml"/> </block>
 <block wx:elif="{{curTab==5}}"> <include src="other.wxml"/> </block>
 <block wx:else> <include src="other.wxml"/> </block>

PS:下面看下小程序动态设置顶部导航条的方法

摘要

之所以记录这个,是因为在做一个小程序项目时,老板需要我在一个页面上index,在不同的时间段顶部导航的颜色需与背景相同。刚开始在老板未要求之前我都是想这样做的,但是我百度方法一直未找到正确且合适的,所以我懵逼了,就偷偷懒用一个固定颜色就好了。哪知道后来老板看项目成果时提出看法说“顶部的颜色与背景色不同感觉不好看,是否可以同不同时间段的背景色一样”,唉~老板不知我的痛,没办法只有听老板的,所以我又认真的看API了,终于看到了。

感觉这个需求会在我之后的项目中会用到,所以在这里做个笔记,

1.动态设置当前页面的标题  wx.setNavigationBarTitle(OBJECT)

object参数说明:

1.属性:title - 类型:String - 必填:是 - 说明:页面的标题

2.属性:success - 类型:Function - 必填:否- 说明:接口调用成功的回调函数

3.属性:fail - 类型:Function - 必填:否 - 说明:接口调用失败的回调函数

4.属性:complete - 类型:Function - 必填:否 - 说明:接口调用结束的回调函数(调用成功或失败都会执行)

wx.setNavigationBarTitle({
    title:"当前页面"
})

2.动态设置顶部导航栏的背景色 wx.setNavigationBarColor(OBJECT)

object参数说明:

  属性-类型-必填-说明

1.fontColor - String - 是 - 前景颜色值,包括按钮、标题、状态栏的颜色,仅支持#fff和#000

2.backgroundColor - String - 是 - 背景颜色,有效值为16进制颜色

3.animation - Object - 否 - 动画效果

4.animation.duration - Number - 否 - 动画变化时间,默认0,单位(毫秒)

5.animation.timingFunc - String - 否 - 动画变化方式,默认linear

6.success - Function - 否 - 接口调用成功的回调函数

7.fail - Function - 否 - 接口调用失败的回调函数

8.complete- Function - 否 - 接口调用结束的回调函数(成功、失败都会执行)

wx.setNavigationBarColor({
   frontColor:'#ffffff',
    backgroundColor:'#ff0000'
})

总结

以上所述是小编给大家介绍的微信小程序顶部可滚动导航效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 #Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 #Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 #Javascript
javascript高级模块化require.js的具体使用方法
Oct 31 #Javascript
JS简单实现点击跳转登陆邮箱功能的方法
Oct 31 #Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 #Javascript
You might like
php导入导出excel实例
2013/10/25 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
2015/11/01 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
SQLite3中文编码 Python的实现
2017/01/11 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
分享6个隐藏的python功能
2017/12/07 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
服务生自我鉴定
2014/01/22 职场文书
农民工创业典型事迹
2014/01/25 职场文书
美容院营销方案
2014/03/05 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
考勤制度通知
2015/04/25 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python