微信小程序observers属性监听器 swiper 实现相册组件 类似 slideTo 定位到指定页功能

微信小程序observers属性监听器

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
  },
  data: {
    // 这里是一些组件内部数据
    //content: 'sdcedc', //主件的数据显示权比behavior高
    amount: 1,
    price: 2,
    priceall: 0
  },
  observers:{ //观察者：属性监听
    'amount'(data) {  //单个监听
      console.log('数量改变了')
    },
    'amount,price'(amount, price) {  //多个监听
      this.setData({
        priceall: amount * price
      })
    }
  },
  methods: {
    // 这里是一个自定义方法
    changee(e) {
      let amounts = e.detail.value
      // console.log(amounts)
      this.setData({
        amount: amounts
      })
      console.log(this.data.amount)
      // this.data.amount = e.detail.value
    }
  }
})

swiper 实现相册组件功能 observers属性监听器

 <view class="xiangcetan">
    <swiper class="swiper-container xiangcesw" current="{{currentidx}}" bindchange="swiperchange">
      <swiper-item class="swiper-slide"
                    wx:for="{{xiangceList}}"
                    wx:key="{{index}}">
        <image class="wximg" mode="aspectFit" src="{{item.img_path}}" alt="" />
        
        <!-- <router-link tag="a"
                     v-if="item.apartment_shi"
                     :to="{ name: 'huxinginfo', params: { a_id: item.id } }"
                     class="link">
        </router-link> -->
        <view class="bombox">
          <view class="pictxt swbomtxt"
            wx:if="{{item.loupan_album_val}}">
            {{ item.loupan_album_val }}
          </view>
          <view class="pictxt swbomtxt"
            wx:if="{{item.apartment_shi}}" >
            {{ item.apartment_shi}}室{{ item.apartment_ting}}厅{{ item.apartment_wei}}卫-{{ item.house_area }}m²
          </view>
          
        </view>

      </swiper-item>
    </swiper>
    <view class="swiper-pagination xiangcepage">{{currentidx+1}}/{{xiangceList.length}}</view>
    <!-- <view class="bombox">
      <view class="pictxt swbomtxt">
        {{ swbomtxt }}
      </view>
      
      <view class="swiper-pagination xiangcepage">{{idx+1}}/{{xiangceList.length}}</view>
    </view> -->
  </view>

js: 子组件修改 current 值；实现相册组件 类似 slideTo 定位到指定页功能

// components/xiangce/xiangce.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    xiangceList: Array,
    idx: Number
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentidx: 2
  },
  observers: { //观察者：属性监听
    'idx' (idx) {
      this.setData({
        currentidx: idx
      })
      // console.log(this.data.currentidx);
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    swiperchange: function (e) {
      this.setData({
        currentidx: e.detail.current
      })
      // console.log(e);
    }
  }
})

less:

.xiangcetan {
  position:relative;
  width: 100%;
  height: 100vh;
  background: #000;
  .xiangcesw {
    position:relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .swiper-slide {
      position: relative;
      width: 100%;
      height: 100%;
      line-height: 100%;
      text-align: center;
      -webkit-box-flex: 1;
      display: table-cell;
      vertical-align: middle;
      .wximg {
        display: inline;
        max-width: 100%;
        max-height: 90%;
      }
      .link {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .bombox {
    position: absolute;
    bottom: 0;
    width: 90%;
    padding: 0 5%;
    background: #222;
    left: 0;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    color: #fff;
    display: flex;
    justify-content: space-between;
    z-index: 5;
  }
  .xiangcepage {
    position: absolute;
    width: 100rpx;
    // background:#222;
    right: 20rpx;
    bottom: 0;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 30rpx;
    color: #fff;
  }
}

部分借鉴于：https://blog.csdn.net/qq_41614928/article/details/90203148