微信小程序实现电影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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
Bootstrap表单布局
Jul 19 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 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
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Django入门使用示例
2017/12/12 Python
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
外贸采购员岗位职责
2014/03/08 职场文书
小学母亲节活动方案
2014/03/14 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
小学英语复习计划
2015/01/19 职场文书
烟台的海导游词
2015/02/02 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
税务会计岗位职责
2015/04/02 职场文书
生死抉择观后感
2015/06/09 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
zabbix监控mysql的实例方法
2021/06/02 MySQL
vue如何清除浏览器历史栈
2022/05/25 Vue.js