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


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计算页面刷新的次数
Jul 20 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
Js如何判断客户端是PC还是手持设备简单分析
Nov 22 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
JavaScript设计模式之单体模式全面解析
Sep 09 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
JS防抖和节流实例解析
Sep 24 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
javascript onmouseout 解决办法
2010/07/17 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
手机端转换rem适应
2017/04/01 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
2019/05/14 jQuery
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
一张图带我们入门Python基础教程
2017/02/05 Python
Python文件的读写和异常代码示例
2017/10/31 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
Python实现的堆排序算法示例
2018/04/29 Python
Python hashlib模块用法实例分析
2018/06/12 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
给同事的道歉信
2014/01/11 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
幼儿园标语大全
2014/06/19 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技