收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

微信小程序頂部可滾動導航效果

需求是小程序做頭部做導航分類的效果

查看圖片

頂部用 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'
})

總結

以上所述是小編給大家介紹的微信小程序頂部可滾動導航效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對積木網網站的支持!

react-native fetch的具體使用方法
在前端快速發展地過程中,為了契合更好的設計模式,產生了fetch框架,此文將簡要介紹下fetch的基本使用。在AJAX時代,進行請求API等網絡請求都是通過

bootstrap Table的一些小操作
本文實例為大家分享了bootstrapTable的操作代碼,供大家參考,具體內容如下functionHQCreatTable(ob){varoption={cache:false,//是否使用緩存,默認為true,所以一般情

JavaScript實現帶有子菜單和控件的slider輪播圖效果
大家或許做過(照片輪播)無限滾動圖片的項目,但是,如果使用普通的滾動,當到達最后一張時,便會滾動回第一張,這是一個非常不好的用戶體驗

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 七乐彩一等奖奖金多少 河北快3开奖号码 体彩网11选5 今日安徽十一选五号 好彩1开奖号码 股票指数有多少种 酒吧骰子玩法大全 陕西体彩11选5选号技巧 投资理财平台哪个最安全最赚钱 北京快三开奖号码查询 云南时时彩五星通选中一个多少钱 贵州快3开奖号码今天 pc幸运28吧 股票实时交易系统 舟山飞鱼开奖号码 期货配资公司可靠吗