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


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 相关文章推荐
javascript中的有名函数和无名函数
Oct 17 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
在Vuex中Mutations修改状态操作
Jul 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.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
PHP中soap的用法实例
2014/10/24 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python之循环结构
2019/01/15 Python
python字典的常用方法总结
2019/07/31 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
澳大利亚儿童精品仓库:Goo & Co.
2019/06/20 全球购物
SQL Server面试题
2013/04/04 面试题
精选干货:Java精选笔试题附答案
2014/01/18 面试题
高三语文教学反思
2014/01/15 职场文书
迟到检讨书1000字
2014/01/15 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
我爱读书演讲稿
2014/05/07 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
婚礼答谢礼品
2015/01/20 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
详解Python中下划线的5种含义
2021/07/15 Python