微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播的具體代碼,供大家參考,具體內(nèi)容如下
最終的目的:
底部:我們要搞好這樣的底部要在app.json填寫tabBar
在pages下面填寫tabBar
"tabBar": { "color": "#dddddd",//默然的顏色 "selectedColor": "#3cc51f",//被點(diǎn)擊后更改的顏色 "borderStyle": "black", "backgroundColor": "#2B2B2B", "list": [{ "pagePath": "pages/movie/movie", "iconPath": "/pages/assets/img/dy-1.png",//默認(rèn)情況下的圖標(biāo) "selectedIconPath": "/pages/assets/img/dy.png",//它被點(diǎn)擊后的圖標(biāo) "text": "影院熱映" }, { "pagePath": "pages/movie/movie", "iconPath": "/pages/assets/img/tj-1.png", "selectedIconPath": "/pages/assets/img/tj.png", "text": "電影推薦" },{ "pagePath": "pages/movie/movie", "iconPath": "/pages/assets/img/search-1.png", "selectedIconPath": "/pages/assets/img/search.png", "text": "查詢電影" } ] },
輪播圖:創(chuàng)建一個(gè)movie.wxml前端。
前端代碼
<view class="content"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" style="width:100%"/> </swiper-item> </block> </swiper> </view>
創(chuàng)建一個(gè)movie.js。
data: { //text:"這是一個(gè)頁(yè)面" imgUrls:[ '/pages/assets/img/001.jpg', '/pages/assets/img/002.jpg', '/pages/assets/img/003.jpg' ], indicatorDots:true,//是否顯示面板指示點(diǎn) autoplay:true,//是否自動(dòng)切換 interval:3000,//自動(dòng)切換時(shí)間間隔 duration:1000,//滑動(dòng)動(dòng)畫時(shí)長(zhǎng) },
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序 (三)tabBar底部導(dǎo)航詳細(xì)介紹
- 微信小程序中進(jìn)行地圖導(dǎo)航功能的實(shí)現(xiàn)方法
- 微信小程序 配置頂部導(dǎo)航條標(biāo)題顏色的實(shí)現(xiàn)方法
- 微信小程序教程系列之設(shè)置標(biāo)題欄和導(dǎo)航欄(7)
- 微信小程序 開(kāi)發(fā)之頂部導(dǎo)航欄實(shí)例代碼
- 微信小程序 swiper組件輪播圖詳解及實(shí)例
- 微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法
- 微信小程序 輪播圖swiper詳解及實(shí)例(源碼下載)
- 微信小程序使用swiper組件實(shí)現(xiàn)類3D輪播圖
- 微信小程序?qū)崿F(xiàn)輪播圖效果
相關(guān)文章
通過(guò)掃小程序碼實(shí)現(xiàn)網(wǎng)站登陸功能
這篇文章主要介紹了通過(guò)掃小程序碼實(shí)現(xiàn)網(wǎng)站登陸功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08使用堆實(shí)現(xiàn)Top K算法(JS實(shí)現(xiàn))
這篇文章主要介紹了使用堆實(shí)現(xiàn)Top K算法,即JS實(shí)現(xiàn),文中詳細(xì)介紹了Top K算法,感興趣的小伙伴們可以參考一下2015-12-12Javascript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方式分享
這篇文章介紹了Javascript實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方式,有需要的朋友可以參考一下2013-10-10使用GruntJS構(gòu)建Web程序之構(gòu)建篇
前一篇記錄了Grunt的安裝,這篇介紹下怎么使用Gruntjs來(lái)搭建一個(gè)前端項(xiàng)目,然后使用grunt合并,壓縮JS文件。2014-06-06js實(shí)現(xiàn)ajax的用戶簡(jiǎn)單登入功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ajax的用戶簡(jiǎn)單登入功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼,需要的朋友可以參考下。2011-08-08