One, the parent passes the child
(1) components
<view class='banners'>
<swiper circular="true" bindchange='bannerChange'>
<block wx:for="{
{banner}}" wx:key="id">
<swiper-item class="banner-item">
<image bindtap="goSubpage" data-id="{
{item.id}}" mode='widthFix' src="{
{item.img}}"></image>
</swiper-item>
</block>
</swiper>
<!-- 标记点 -->
<view class='dots'>
<block wx:for="{
{banner.length}}" wx:key="index">
<view class="dot {
{index===swiperCurrent ? 'active':''}}"></view>
</block>
</view>
</view>
properties: {
banner: {
type: Array,
value: ''
},
//接收类型Array数组类型,Number数字类型,String字符串,Object对象,function方法
},
/**
* 组件的初始数据
*/
data: {
swiperCurrent: 0,
},
methods:{
// 轮播图滑动切换指示点
bannerChange(e) {
this.setData({
swiperCurrent: e.detail.current
})
},
}
.banners {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 1000;
background-color: #fff;
padding: 30rpx 0 0 0;
box-sizing: border-box;
}
.banners swiper,
.banner-item image {
width: 100%;
height: 100vh;
z-index: 1000;
position: relative;
}
.dots {
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
bottom: 50rpx;
left: 0;
z-index: 1000;
}
.dot {
margin: 20rpx 10rpx;
width: 15rpx;
height: 15rpx;
background: #ddd;
transition: all 0.6s;
border-radius: 50%;
background: #FF4A61;
}
.dot.active {
background: #FF4A61;
margin: 20rpx 10rpx;
width: 40rpx;
height: 15rpx;
transition: all 0.6s;
border-radius: 30rpx;
}
(2) Page page
json receiving
"usingComponents": {
"banner":"../../components/indexBanner/indexBanner"
}
<banner banner="{
{banner}}"></banner>
banner: [{
img: 'https://sucai.suoluomei.cn/sucai_zs/images/20201023172025-1.png',
id: 1
}, {
img: 'https://sucai.suoluomei.cn/sucai_zs/images/20201023172043-2.png',
id: 2
}, {
img: 'https://sucai.suoluomei.cn/sucai_zs/images/20201023172053-3.png',
id: 3
}, {
img: 'https://sucai.suoluomei.cn/sucai_zs/images/20201023172106-4.png',
id: 4
}, {
img: 'https://sucai.suoluomei.cn/sucai_zs/images/20201023172116-5.png',
id: 5
}], //启动页轮播图
Second, the son passes the father
out
<button type="primary" bindtap="getoption">确定</button>
data: {
},
methods: {
getoption(e) {
this.triggerEvent('index', {
i:1})//triggerEvent广播数据 index为广播事件
}
}
receive
<share bind:index="getoption"></share>
getoption(e){
console.log(e.detail.i)
}