横向列表内点击某个元素滑动到视图中心

在微信小程序中，要实现点击某个元素后使另一个元素滚动到视图中间，可以按照以下步骤进行：

效果图: image.png

html

<scroll-view
                :scroll-x="true"
                :enhanced="true"
                id="scrollContainer"
                :scroll-with-animation="isAnimation"
                :scroll-left="targetScrollLeft"
                class="equity-list"
                @scroll="scrollMove"
            >
                <image
                    class="equity-item"
                    v-for="(item, index) in equityList"
                    :src="item?.headImage"
                    :key="index"
                    :id="`equity-${index}`"
                    :style="`opacity:${currentIndex === index ? 1 : 0.5} ;`"
                    :data-index="index"
                    @tap="handleChangeEquity(item, index)"
                />
            </scroll-view>

css

.equity-list {
            display: block;
            width: unset;
            white-space: nowrap;
            margin-top: 52px;

            .swiper-item1 {
                width: 144px;
                height: 136px;
            }

            &::-webkit-scrollbar {
                width: 0;
                height: 0;
                color: transparent;
            }

            .equity-item {
                width: 144px;
                height: 136px;
                margin-right: 36px;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

js

/**
 * 动画标识
 */
isAnimation: boolean = false;

/**
 * 滑动距离
 */
targetScrollLeft;

/**
 * 移动信息
 */
    moveParams: any = {};

/**
 * 当前项坐标
 */
currentIndex: number = 0;

 /**
  * 页面初始化
  */
async init(option: Record<string, string>): Promise<void> {
        super.init(option);
        if (option?.id && option?.id !== "undefined") {
            this.id = option.id;
        }
        if (option?.currentLevel && option?.currentLevel !== "undefined") {
            this.currentLevel = Number(option.currentLevel);
        }
        if (option?.actCode && option?.actCode !== "undefined") {
            this.actCode = option.actCode;
        }
        await this.getLevelInterestDetailLists();
        await this.getMemberCouponList();
        Taro.nextTick(() => {
            this.getRect("#equity-" + this.currentIndex);
        });
    }
    /**
     * 获取权益列表
     */
    async getLevelInterestDetailLists() {
        let res = await EquityService.getLevelInterestDetailLists(this.currentLevel);
        if (res) {
            const index = res.findIndex((i) => i.interestsNo === this.id);
            for (let i = 0; i < 30; i++) {
                let copiedArray = res.slice();
                this.equityList.push(...copiedArray);
            }
            let item = res[index];
            this.remark = item.remark;
            this.id = item.interestsNo;
            this.currentIndex = index + res.length * 15;
        }
    }

    /**
     * 权益切换
     */
    handleChangeEquity(item, index1) {
            this.isAnimation = true;
            this.id = item.interestsNo;
            const index = this.equityList.findIndex((i) => i.interestsNo === this.id);
            this.remark = this.equityList[index].remark;
            this.currentIndex = index1;
            this.actCode = "";
            this.getMemberCouponList();
        Taro.nextTick(() => {
            this.getRect("#equity-" + index1);
        });
    }

    /**
     * 当前权益信息
     */
getRect(ele) {
        let that = this;
        //节点查询
        Taro.createSelectorQuery()
            .select(ele)
            .boundingClientRect((rect) => {
                console.log("rect---->", rect);
                let moveParams = that.moveParams;
                moveParams.subLeft = rect.left;
                moveParams.subHalfWidth = rect.width / 2;
                that.moveTo();
            })
            .exec();
    }

/**
 * 标签移动
 */
moveTo() {
        let subLeft = this.moveParams.subLeft;
        const { windowWidth } = Taro.getSystemInfoSync();
        let subHalfWidth = this.moveParams.subHalfWidth;
        let scrollLeft = this.moveParams.scrollLeft || 0;
        let distance = subLeft - windowWidth / 2 + subHalfWidth;
        scrollLeft = scrollLeft + distance;
        this.targetScrollLeft = scrollLeft;
    }

/**
 * 组件滚动事件
 */
scrollMove(e) {
        console.log("e----->", e);
        this.moveParams.scrollLeft = e.detail.scrollLeft;
    }