微信小程序实现电影App导航和轮播
更新时间:2020年11月30日 11:27:07 作者:Би Чинранд хайртай
这篇文章主要为大家详细介绍了微信小程序实现电影App导航和轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现电影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,//滑动动画时长
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
JavaScript数据类型判断之Object.prototype.toString.call() 的详解(示
`Object.prototype.toString.call()`是JavaScript中判断数据类型的强大方法,可以精确区分所有内置类型,包括原始类型和对象类型,适用于跨环境检测和区分自定义类实例,感兴趣的朋友跟随小编一起看看吧2024-11-11
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
这篇文章主要介绍了判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-04-04
js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例
js加密解密可以使用crypto-js它可以进行MD5、SHA-1、SHA-256、Base64、AES、DES、等算法和加密,这是一个对称加密的库,可以使用 AES、DES、但没有rsa等非对称加密的方法2023-12-12


最新评论