微信小程序实现电影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 写类方式之一
Jul 05 Javascript
JQUERY 浏览器判断实现函数
Aug 20 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
详解vue 组件的实现原理
Nov 12 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
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
jquery移动节点实例
2015/01/14 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
Python中的高级函数map/reduce使用实例
2015/04/13 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
服务生自我鉴定
2014/01/22 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
就业导师推荐信范文
2015/03/27 职场文书
心理学培训心得体会
2016/01/22 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS