微信小程序实现电影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知识点收藏
Feb 22 Javascript
JavaScript实现Sleep函数的代码
Mar 04 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
PHP请求Socket接口测试实例
2016/08/12 PHP
laravel自定义分页效果
2017/07/23 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
jquery ajax执行后台方法
2010/03/18 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python多重继承新算法C3介绍
2014/09/28 Python
Python判断字符串与大小写转换
2015/06/08 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python利用7z批量解压rar的实现
2019/08/07 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
文秘专业毕业生就业推荐信
2013/11/08 职场文书
店长助理岗位职责
2013/12/13 职场文书
益达广告词
2014/03/14 职场文书
选秀节目策划方案
2014/06/06 职场文书
助学贷款贫困证明
2014/09/23 职场文书
2015个人半年总结范文
2015/03/09 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫