微信小程序实现电影App导航和轮播
作者:Би Чинранд хайртай 发布时间:2024-04-18 09:49:32
标签:微信小程序,导航,轮播
本文实例为大家分享了微信小程序实现电影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,//滑动动画时长
},
来源:https://blog.csdn.net/jiangqingzhihe/article/details/110350364


猜你喜欢
- 什么是钩子之前有转一篇关于回调函数的文章钩子函数、注册函数、回调函数,他们的概念其实是一样的。 钩子函数,顾名思义,就是把我们自己实现的ho
- 本文实例为大家分享了PyQt5如何能够创建在桌面屏幕上居中窗口的具体代码,供大家参考,具体内容如下下面的脚本说明我们如何能够创建在桌面屏幕上
- 1. 传值与传址的区别传值就是传入一个参数的值,传址就是传入一个参数的地址,也就是内存的地址(相当于指针)。他们的区别是如果函数里面对传入的
- Java基础—学生信息管理系统(使用数据库),供大家参考,具体内容如下前一段时间写了学生信息管理系统(使用ArrayLi
- 本人初学python是菜鸟级,写的不好勿喷。python爬虫用了比较简单的urllib.parse和requests,把爬来的数据显示在地图
- <form action="calscore.asp?action=do" met
- JDBC之C3P0数据库连接池,供大家参考,具体内容如下1 首先在src中创建c3p0-config.xml 配置文件,文件中内容如下(首先
- 每日凌晨2:00进行dump对相应数据库进行备份,同时对相应数据库进行binlog日志文件更新。如果发现数据库错误,只需要先恢复上一个dum
- 做设计类网址导航的初衷是为了资源整合,也是在尝试解决问题。假定访问用户都是行业人士,或者目地性很强的有一定了解的用户,应该如何考虑这个组织系
- 前言若电脑之前已经安装过vue-cli了,但是版本过低,比方说当前vue-cli的版本为2.9.6,然后我想升级到vue-cli的最新版本4
- 本文实例讲述了Python计算字符宽度的方法。分享给大家供大家参考,具体如下:最近在用python写一个CLI小程序,其中涉及到计算字符宽度
- 根本原因:python定义函数时,一般都会有指定返回值,如果没有显式指定返回值,那么python就会默认返回值为None我们输入的代码如下:
- 关于list的insert函数list#insert(ind,value)在ind元素前面插入value首先对ind进行预处理:如果ind&
- 本文实例讲述了MHA实现mysql主从数据库手动切换的方法,分享给大家供大家参考。具体方法如下:一、准备工作1、分别在Master和Slav
- reflect.StructField 和 reflect.Method如果变量是一个结构体,我们还可以通过结构体域类型对象 reflect
- 前言这篇文章主要介绍了JS大坑之19位数的Number型精度丢失问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习
- Python之Selenium(自动化浏览器测试)1.安装seleniumpip install selenium -i https://p
- 使用 WinHttpRequest 伪造 HTTP 头信息,伪造 Referer 等信息。由于微软封锁了 XmlHttp 对象,所以无法伪造
- 之前在某本书上看到一个程序,可以通过 Python 记录下全局范围内的键盘事件,使用的是 ctypes 库。后来几经尝试,始终不能成功运行。
- 看代码~from django.contrib import messages messages.info(request, '要显