微信小程序实现电影App导航和轮播


Posted in Javascript onNovember 30, 2020

本文实例为大家分享了微信小程序实现电影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 相关文章推荐
CCPry JS类库 代码
Oct 30 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
vue 1.0 结合animate.css定义动画效果
Jul 11 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 #Vue.js
javascript实现京东快递单号的查询效果
Nov 30 #Javascript
JS模拟实现京东快递单号查询
Nov 30 #Javascript
JavaScript实现京东快递单号查询
Nov 30 #Javascript
基于p5.js 2D图像接口的扩展(交互实现)
Nov 30 #Javascript
express异步函数异常捕获示例详解
Nov 30 #Javascript
详解Vue 的异常处理机制
Nov 30 #Vue.js
You might like
论建造顺序的重要性
2020/03/04 星际争霸
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
实例讲解python函数式编程
2014/06/09 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
pymysql的简单封装代码实例
2020/01/08 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
Hotels.com越南:酒店预订
2019/10/29 全球购物
文案策划专业自荐信
2014/07/07 职场文书
班级出游活动计划书
2014/08/15 职场文书
如何书写邀请函?
2019/06/24 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫