微信小程序-实用项目开发全集：25.侧滑导航

需求是制作小程序的头部和导航分类的效果

-view组件用于顶部水平滚动，类似于tab的效果。 内容以类似模板的方式引用并且可以重复使用。

10

11

12

“-”-x=“{{true}}”=“：100%”>

for = "{{}}" wx:key= "id" data-type= "{{item.id}}" = "-view- {{==item.id?'sv-item-on':' sv-item-off'}}" = "" >

{{项目名}}

if = "{{ ==0}}" > ".wxml" />

"{{==1}}" > "fuli.wxml" />

“{{==2}}”>“.wxml”/>

“{{==3}}”>“.wxml”/>

“{{==4}}”>“.wxml”/>

“{{==5}}”>“.wxml”/>

其他>“.wxml”/>

PS：我们来看看如何在小程序中动态设置顶部导航栏。

概括

之所以记录下来，是因为我在做一个小程序项目的时候，老板需要我在不同的时间段让顶部导航的颜色和页面背景的颜色一样。 一开始，在老板要求我做之前，我就想做这个，但我通过百度的方法始终没有找到正确且合适的，所以我很困惑，只是使用了固定的颜色。 没想到，后来老板看项目成果时，提出意见说：“顶部颜色和背景颜色不一样，不好看，能不能和不同时间段的背景颜色一样？” ？” 唉，老板不知道我的痛苦。 我没办法，只能听他的。 于是我又仔细看了一遍API，终于看到了。

我感觉这个需求会用到我以后的项目中，所以在这里做一下记录，

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

参数说明：

1. 属性： - 类型： - 必需：是 - 描述：页面标题

2. 属性： - 类型： - 必填：否 - 描述：接口调用成功的回调函数

3. 属性：fail - 类型： - 必填：否 - 描述：接口调用失败的回调函数

4. 属性： - 类型： - 必填：否 - 描述：接口调用结束时的回调函数（调用成功或失败都会执行）

wx.e({

：“当前页面”

})

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

参数说明：

属性类型必需描述

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

2. - - 是 - 背景颜色，有效值为十六进制颜色

3. - - 无动画效果

4.. - - 否 - 动画变化时间，默认0，单位（毫秒）

5.. - - 否 - 动画更改模式，默认

6. - - 无 - 接口调用成功的回调函数

7.fail - - 无 - 接口调用失败时的回调函数

- - 否- 接口调用结束时的回调函数（成功和失败时均执行）

wx.r({

: '#',

: '#'

})

总结

以上就是小编介绍的微信小程序顶部可滚动导航效果。 希望对您有所帮助。 如果您有任何疑问，请给我留言，编辑会及时回复您。 我还要感谢大家对 网站的支持。