Mini program passes from parent to child, and from child to parent component

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)
 }

Guess you like

Origin blog.csdn.net/hql1024/article/details/109247389