weex |
您所在的位置:网站首页 › slider组件 › weex |
本节学习目标 熟练使用slider组件 下面的内容是你必须要掌握的 1.怎么让banner的宽度和屏幕的宽度相等 2.怎么让banner自动轮播和轮播间隔 3.如何添加指示器 4.如何设置指示器的颜色和大小 5.点击轮播图时触发事件 6.检测当前轮播图是那一张 我们首先创建一个slider.vue 修改app.js 文件的代码 import root from './src/sldier.vue' root.el = '#root' export default new Vue(root);1.创建一个轮播组件,让其宽度和屏幕宽度相等 接下来,创建一个轮播图组件 .slider{ width:750px; height: 300px; background-color: green; }运行后的结果如下 注意 系统默认使用750px表示屏幕的宽度,这个是一个相对值,系统会根据不同手机的分辨率按照比例自动计算实际的宽度值 接下来我们给其设置几张图片 代码如下 export default{ } .slider{ width:750px; height: 300px; background-color: green; } .image{ width:750px; height: 300px; }从代码中我们可以看到 设置图片地址的方式是我们直接写在标签里面的,但是一般图片地址是要从服务器获取的,显然这样的方式不能满足我们实际开发,接下来我们使用Vue.js 的语法进行变量绑定 格式如下 v-bind:属性='变量'简写:属性=‘变量’ 修改后的代码为 export default{ data(){ return{ src1:'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg', src2:"https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg", src3:"https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg" } } } .slider{ width:750px; height: 300px; background-color: green; } .image{ width:750px; height: 300px; }解释一下: export default{} 这个代表js输出为一个对象,data(){} 这个是一个函数 这个是js新的语法形式,老语法是data:function(){},当然你也可以使用老语法,weex都是支持的! 对于上面这种写法还是有些笨拙,下面我们使用循环遍历的方式,来渲染我们的数据 看一下列表渲染的语法 v-for="item in array" 或 v-for=(item, index) in array 接下来看我们的代码如何写 export default{ data(){ return{ images:['https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg', "https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg", "https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg" ] } } } .slider{ width:750px; height: 300px; background-color: green; } .image{ width:750px; height: 300px; }注意一点 1.如果你发现自己的图片显示不出来,有可能是你的图片组件没有设置宽和高 2.weex 的图片下载需要自定有原生代码写下载缓冲逻辑,这个我们后面会详细讲解,请先使用预览工具或者我们自己的app扫码查看 2.怎么让banner自动轮播和轮播间隔 如果想要动态的控制这些参数,可以绑定变量,语法如下 export default{ data(){ return { interval:3000, autoPlay:true } } }注意 时间单位为毫秒(ms) 3.指示器 一般banner轮播图都有像这样的指示器,下面教大家如何实现这样的效果,weex有个指示器组件 我们只需要将指示器组件放在 组件内部,注意一定是里面哦,不然没有效果的 还有一点要注意,使用绝对定位设置指示器的位置 .indicator{ position:absolute; left:20px; bottom:40px; width:100px; height: 44px; }效果图如下 提醒各位一点 如果你发现手机上的效果和网页上的效果不一致,这个可能是weex框架的问题,请以真机上的效果为准 4.如何设置指示器的颜色和大小 item-color这是指示器没被选中的颜色 item-selected-color设置指示器被选中的颜色 item-size指示器的圆点大小 .indicator{ position:absolute; left:20px; bottom:40px; width:100px; height: 44px; item-color:red; item-selected-color:green; item-size:20px; }5.点击轮播图时触发事件 通常我们的banner 点击之后会跳转到一个新的页面,要实现这个功能首先要相应点击效果,并且知道单机的是那一个banner 我们使用v-for=“(src,index) in images”也将索引值遍历一下,目的是要将index当做参数传递给方法 问题来了,这个方法写在哪里了,Vue给我提供了一个methods对象,让我们把事件方法都写在这个里面,如下 export default{ data(){ return{ images:['https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg', "https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg", "https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg" ] } } ,methods:{ click(e){ console.log(e) } } }注意data是方法,methods是对象 6.检测当前轮播图是那一张 知道当前banner是那一张,这个需求不是很常用,但是我们还是学习一下 //同上我们看一下方法如何定义 var modal = weex.requireModule('modal') export default{ data(){ return{ images:['https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg', "https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg", "https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg" ] } } ,methods:{ click(e){ }, change(event){ modal.toast({message:event.index,duration:1}) } } }有义务提醒一下各位 change(event) event 这个参数,系统会传递给我们定义的函数,我们获取它的一个属性index, 这个就是banner的索引值,有一个坑,先说一下,网页是获取不到这个index值的请使用真机测试 var modal = weex.requireModule('modal') 引入这个模块,可以实现弹窗效果,toast()是它的一个方法,可以实现提示语效果,关于这个模块的使用方法我们后面会讲到,不是本节的主要内容,还有如何自定义模块,之后的文章都会讲到,请继续阅读! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |