小程序原生swiper中bindtransition监听滑动效果

需求：触摸滑动swiper，轮播图的图片高度随之变化

wxml

<view>
    <swiper next-margin="50rpx" previous-margin="54rpx" current="{{swiCurrent}}"   bindchange="swiperChange" data-current="{{swiCurrent}}" interval="100" bindanimationfinish="bindanimationfinish" bindtransition="bindtransition" class="growUp-swiper" spaceBetween="20rpx" >
        <swiper-item wx:for="{{backg}}" wx:key="index"  >
            <view id="{{ (index === swiCurrent) ? 'tabCon_swiper':'tabCon_swiper1'}}" class="{{ 'tabCon_swiper'}} " data-item="{{item}}" style="background-image: url({{item.url}});height:{{item.height}}rpx">
            </view>
        </swiper-item>
    </swiper>
</view>

wxss

.tabCon_swiper {
	width: 620rpx;
	position: relative;
	z-index: 2;
	padding: 48rpx 46rpx 40rpx 46rpx;
	box-sizing: border-box;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 300rpx;
	border-radius: 16rpx;
}

var backg = [
    {
        id: 4,
        url: 'https://scpic.chinaz.net/files/pic/pic9/202112/apic37052.jpg',
        img: '../../images/grownth/xinx.png',
        height: 300,
    },
    {
        id: 2,
        url: 'https://scpic.chinaz.net/files/pic/pic9/202006/apic25846.jpg',
        img: '../../images/grownth/youx.png',
        height: 280,
    },
    {
        id: 3,
        url: 'https://scpic.chinaz.net/files/pic/pic9/202003/zzpic23486.jpg',
        img: '../../images/grownth/zunx.png',
        height: 280,
    },
];
Page({
    data: {
        backg:backg,
        swiCurrent: 0, //当前的current值
        pdshow:true, //判断滑动后是否还处在当前的current，
    },
    onLoad() {
    },
    swiperChange: function (event) {
        var current = event.detail.current;
        this.setData({
            swiCurrent: current,
            pdshow: !this.data.pdshow
        });
    },
    bindanimationfinish: function (event) {
        console.log("bindanimationfinish", event);
        this.setData({
            pdshow: true,
            indexNum: this.data.swiCurrent
        });
    },
    bindtransition: function (event) {
        var _this = this;
        var len = this.data.backg.length;
        var dx = event.detail.dx;// 滑动的距离，向右滑为负数，向左滑为正数
        var beindex = 0;//滑动开始后当前的索引值
        var index = 0;// 滑动开始后要滑动到位置的索引值
        if (dx > 0) {
            if (this.data.swiCurrent + 1 != len && this.data.swiCurrent !== 3) {
                if (this.data.swiCurrent + 1 != index) {
                    index = this.data.pdshow ? this.data.swiCurrent + 1 : this.data.swiCurrent;
                    beindex = this.data.pdshow ? this.data.swiCurrent : this.data.swiCurrent === 2 ? 1 : this.data.swiCurrent - 1;
                }
            }
            else {
                index = this.data.swiCurrent;
                beindex = this.data.swiCurrent - 1;
            }
        }
        if (dx < 0) {
            if (this.data.swiCurrent != 0) {
                index = this.data.pdshow ? this.data.swiCurrent - 1 : this.data.swiCurrent;
                beindex = this.data.pdshow ? this.data.swiCurrent : this.data.swiCurrent === 2 ? 1 : this.data.swiCurrent - 1;
            }
            else {
                index = this.data.swiCurrent;
                beindex = 1;
            }
        }
        var _that = this;
        var query = wx.createSelectorQuery();
        query.select('#tabCon_swiper').boundingClientRect();
        query.select('#tabCon_swiper1').boundingClientRect();
        query.exec(function (res) {
            var _a, _b;
            var par = (Math.abs(dx) / res[0].width).toFixed(2);// 获取当前的滑动的距离占可滑动宽度的百分比
            if (Number(par) > 1 || Number(par) === 1) {
                par = "1";
            }
            if (Number(par) === 0) {
                index = _this.data.indexNum;
                beindex = _this.data.indexNum === 1 ? _this.data.swiCurrent - 1 : 1;
            }
            var change = "backg[" + Number(index) + "].height";
            var change1 = "backg[" + Number(beindex) + "].height";
            var heigth = Number(par) == 1 || Number(par) == 0 ? 280 : 300 - 20 * Number(par);
            var heigth1 = Number(par) == 1 || Number(par) == 0 ? 300 : 280 + 20 * Number(par);
            if (_this.data.swiCurrent === 1) {
                _that.setData((_a = {},
                    _a[change] = heigth1,
                    _a[change1] = heigth,
                    _a));
            }
            else {
                _that.setData((_b = {},
                    _b[change] = Number(par) == 1 || Number(par) == 0 ? 300 : heigth1,
                    _b[change1] = Number(par) == 1 || Number(par) == 0 ? 280 : heigth,
                    _b));
            }
        });
    },
})