微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)電影App導(dǎo)航和輪播的具體代碼,供大家參考,具體內(nèi)容如下
最終的目的:

底部:我們要搞好這樣的底部要在app.json填寫(xiě)tabBar
在pages下面填寫(xiě)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": "查詢(xún)電影"
}
]
},
輪播圖:創(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)畫(huà)時(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)類(lèi)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
JavaScript web表單功能交流干貨滿(mǎn)滿(mǎn)
表單通常用來(lái)收集網(wǎng)頁(yè)訪問(wèn)者信息,常見(jiàn)的表單比如搜索引擎的搜索框、各網(wǎng)頁(yè)應(yīng)用的注冊(cè)或者登陸界面等。一個(gè)表單通常包括多個(gè)表單控件2021-10-10
使用堆實(shí)現(xiàn)Top K算法(JS實(shí)現(xiàn))
這篇文章主要介紹了使用堆實(shí)現(xiàn)Top K算法,即JS實(shí)現(xiàn),文中詳細(xì)介紹了Top K算法,感興趣的小伙伴們可以參考一下2015-12-12
Javascript實(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-06
JavaScript中如何判斷一個(gè)值的類(lèi)型
在js中有一個(gè)運(yùn)算符可以幫助我們判斷一個(gè)值的類(lèi)型,它就是typeof運(yùn)算符。下面通過(guò)本文給大家分享JavaScript中如何判斷一個(gè)值的類(lèi)型,需要的朋友參考下吧2017-09-09
js實(shí)現(xiàn)ajax的用戶(hù)簡(jiǎn)單登入功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ajax的用戶(hù)簡(jiǎn)單登入功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06
javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼
javascript 動(dòng)態(tài)改變onclick事件觸發(fā)函數(shù)代碼,需要的朋友可以參考下。2011-08-08

