微信小程序实现电影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 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
js中生成map对象的方法
Jan 09 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
Jquery Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 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
php桌面中心(四) 数据显示
2007/03/11 PHP
php在服务器执行exec命令失败的解决方法
2012/03/03 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
vue-cli 首屏加载优化问题
2018/11/06 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
Python实现调度算法代码详解
2017/12/01 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
土木工程师职业规划范文
2014/03/07 职场文书
个人党性分析材料
2014/12/19 职场文书