本文实例为大家分享了微信小程序实现电影App导航和轮播的具体代码，供大家参考，具体内容如下
最终的目的：
底部：我们要搞好这样的底部要在app.json填写tabBar
在pages下面填写tabBar
"tabBar": {
"color": "#dddddd",//默然的颜色
"selectedColor": "#3cc51f",//被点击后更改的颜色
"borderStyle": "black",
"backgroundColor": "#2B2B2B",
"list": [{
"pagePath": "pages/movie/movie",
"iconPath": "/pages/assets/img/dy-1.png",//默认情况下的图标
"selectedIconPath": "/pages/assets/img/dy.png",//它被点击后的图标
"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": "查询电影"
}
]
},
轮播图：创建一个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>
创建一个movie.js。
data: {
//text:"这是一个页面"
imgUrls:[
'/pages/assets/img/001.jpg',
'/pages/assets/img/002.jpg',
'/pages/assets/img/003.jpg'
],
indicatorDots:true,//是否显示面板指示点
autoplay:true,//是否自动切换
interval:3000,//自动切换时间间隔
duration:1000,//滑动动画时长
},
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- 微信小程序 （三）tabBar底部导航详细介绍
- 微信小程序中进行地图导航功能的实现方法
- 微信小程序 配置顶部导航条标题颜色的实现方法
- 微信小程序教程系列之设置标题栏和导航栏（7）
- 微信小程序 开发之顶部导航栏实例代码
- 微信小程序 swiper组件轮播图详解及实例
- 微信小程序之swiper轮播图中的图片自适应高度的方法
- 微信小程序 轮播图swiper详解及实例（源码下载）
- 微信小程序使用swiper组件实现类3D轮播图
- 微信小程序实现轮播图效果
本文由 华域联盟 原创撰写：华域联盟 » 微信小程序实现电影App导航和轮播
转载请保留出处和原文链接：https://www.cnhackhy.com/42255.htm
