weex 轮播如何使用?
下面的内容是你必须要掌握的
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.创建一个轮播组件,让其宽度和屏幕宽度相等
接下来,创建一个轮播图组件
<template>
<div>
<slider class="slider">
<!--在这里面写内容-->
</slider>
</div>
</template>
<script>
</script>
<style>
.slider{
width:750px;
height: 300px;
background-color: green;
}
</style>
运行后的结果如下
注意
系统默认使用750px表示屏幕的宽度,这个是一个相对值,系统会根据不同手机的分辨率按照比例自动计算实际的宽度值
接下来我们给其设置几张图片
代码如下
<template>
<div>
<slider class="slider">
<image src="https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg" class="image"> </image>
<image src="https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg" class="image"></image>
<image src="https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg" class="image"></image>
<!--在这里面写内容-->
</slider>
</div>
</template>
<script>
export default{
}
</script>
<style>
.slider{
width:750px;
height: 300px;
background-color: green;
}
.image{
width:750px;
height: 300px;
}
</style>
从代码中我们可以看到
设置图片地址的方式是我们直接写在标签里面的,但是一般图片地址是要从服务器获取的,显然这样的方式不能满足我们实际开发,接下来我们使用Vue.js 的语法进行变量绑定
格式如下
v-bind:属性='变量'
简写:属性=‘变量’
修改后的代码为
<template>
<div>
<slider class="slider">
<image :src="src1" class="image"> </image>
<image :src='src2' class="image"></image>
<image :src='src3' class="image"></image>
<!--在这里面写内容-->
</slider>
</div>
</template>
<script>
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"
}
}
}
</script>
<style>
.slider{
width:750px;
height: 300px;
background-color: green;
}
.image{
width:750px;
height: 300px;
}
</style>
解释一下:
export default{} 这个代表js输出为一个对象,
data(){}
这个是一个函数 这个是js新的语法形式,老语法是data:function(){}
,当然你也可以使用老语法,weex都是支持的!
对于上面这种写法还是有些笨拙,下面我们使用循环遍历的方式,来渲染我们的数据
看一下列表渲染的语法
v-for="item in array" 或 v-for=(item, index) in array
接下来看我们的代码如何写
<template>
<div>
<slider class="slider">
<image :src="src" v-for='src in images' class="image"> </image>
</slider>
</div>
</template>
<script>
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" ] }
}
}
</script>
<style>
.slider{
width:750px;
height: 300px;
background-color: green;
}
.image{
width:750px;
height: 300px;
}
</style>
注意一点
1.如果你发现自己的图片显示不出来,有可能是你的图片组件没有设置宽和高
2.weex 的图片下载需要自定有原生代码写下载缓冲逻辑,这个我们后面会详细讲解,请先使用预览工具或者我们自己的app扫码查看
2.怎么让banner自动轮播和轮播间隔
<slider class="slider" interval="3000" auto-play="true">
如果想要动态的控制这些参数,可以绑定变量,语法如下
<slider class="slider" :interval="interval" :auto-play="autoPlay"> export default{
data(){
return {
interval:3000,
autoPlay:true
}
}
}
注意
时间单位为毫秒(ms)
3.指示器
一般banner轮播图都有像这样的指示器,下面教大家如何实现这样的效果,weex有个指示器组件<indicator></indicator>
我们只需要将指示器组件放在<slider> 组件内部,注意一定是里面哦,不然没有效果的
<slider class="slider">
<image :src="src" v-for='src in images' class="image"> </image>
<indicator class="indicator"></indicator>
</slider>
还有一点要注意,使用绝对定位设置指示器的位置
.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
<template>
<div>
<slider class="slider">
<image :src="src" v-for='(src,index) in images' class="image" @click='click(index)'> </image>
<indicator class="indicator"></indicator>
</slider>
</div>
</template>
我们使用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是那一张,这个需求不是很常用,但是我们还是学习一下
<slider class="slider" interval='1000' auto-play="true" @change="change">
//同上
<slider>
我们看一下方法如何定义
<script>
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})
}
}
}
</script>
有义务提醒一下各位
change(event) event 这个参数,系统会传递给我们定义的函数,我们获取它的一个属性index, 这个就是banner的索引值,有一个坑,先说一下,网页是获取不到这个index值的请使用真机测试
var modal = weex.requireModule('modal')
引入这个模块,可以实现弹窗效果,toast()是它的一个方法,可以实现提示语效果,关于这个模块的使用方法我们后面会讲到,不是本节的主要内容,还有如何自定义模块,之后的文章都会讲到,请继续阅读!
最新文章
- iOS sqlite 的各种操作
- .net中c#获取本机IP地址实例代码
- webform 复合控件
- 分享大家一个背景为下雪的JQuery
- LeetCode:Gray Code(格雷码)
- 深入了解Javascript模块化编程
- 【转】Github轻松上手2-如何使用命令行创建和管理repo
- delphi TreeView修改选中的节点的颜色和背景
- C++-----lambda使用
- javascript学习笔记-4
- 中标麒麟龙芯平台--docker基础镜像制作
- flutter 解析json
- docker - 容器lxc
- vue中是使用富文本编辑器vue-quill-edit
- Centos升级mongo客户端
- Android 四大组件之“ BroadcastReceiver ”
- LICEcap 和 FS Capture入门教程
- P4101 [HEOI2014]人人尽说江南好
- python网络编程--协程
- MySQL mha 高可用集群搭建
热门文章
- What happens in an async method
- 统计网络time_wait连接状态及tcpip连接数
- Mysql中两个select语句的连接
- 微信小程序之生成二维码
- Android jni/ndk编程三:native访问java
- C++学习 之 初识C++
- 给定一个字符串,把字符串内的字母转换成该字母的下一个字母,a换成b,z换成a,Z换成A,如aBf转换成bCg, 字符串内的其他字符不改变,给定函数,编写函数 void Stringchang(const char*input,char*output)其中input是输入字符串,output是输出字符串
- oracle 导入关键字说明
- JSP 传统标签extends TagSupport
- 基于OpenCV的循环行、列移动函数circShift()