1、效果,1、自动,2、左右滑动,3、点击item弹出Toast框
2、源码uswiper.vue:
<template>
<view class="u-demo">
<u-toast ref="uToast"></u-toast>
<u-swiper
:height="250"
:list="list"
:effect3d="effect3d"
:indicator-pos="indicatorPos"
:interval="3000"
@click="click">
</u-swiper>
</view>
</template>
<script>
export default {
data() {
return {
list: [{
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
title: '昨夜星辰昨夜风,画楼西畔桂堂东'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
title: '身无彩凤双飞翼,心有灵犀一点通'
},
{
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
}
],
effect3d: true,
indicatorPos: 'bottomCenter',
}
},
methods: {
click(utoast) {
this.$refs.uToast.show({
title: `点击了第${utoast + 1}张图片`,
type: 'success'
})
}
}
}
</script>
3、uswiper.vue代码中:u-demo样式
u-demo样式可以不用写,直接导入封装样式demo.scss,项目先看一下
demo.scss代码:
在App.vue中加上:
4、需要导入第三方项目uview-ui,如下图:
uview-ui官网地址,微信公众号:彬sir哥,关注回复[uView1.0],获取uview-ui