uniapp图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件

在UniApp中使用swiper组件实现图片高度根据图片宽度自适应，并通过选项卡跳到锚点位置，以及滑动到某个元素位置添加事件，可以按照以下步骤进行：

1. 在Vue文件中使用swiper组件，并通过设置swiper-item的样式来实现图片高度根据图片宽度自适应。例如：

                                        跳转到锚点1      跳转到锚点2      跳转到锚点3

2. 在Vue文件中定义data数据和相关方法。例如：

export default {
  data() {
    return {
      images: [
        { id: 1, url: 'img-url-1' },
        { id: 2, url: 'img-url-2' },
        { id: 3, url: 'img-url-3' }
      ],
      itemWidth: 0
    }
  },
  mounted() {
    this.getItemWidth();
  },
  methods: {
    getItemWidth() {
      // 获取swiper-item的宽度
      uni.createSelectorQuery().select('.swiper-item').boundingClientRect((rect) => {
        this.itemWidth = rect.width;
      }).exec();
    },
    swiperChange(e) {
      // 当swiper滑动到某个图片时触发的事件
      console.log('当前索引：', e.detail.current);
    },
    scrollToAnchor(anchor) {
      // 跳转到锚点位置
      uni.pageScrollTo({
        selector: `#${anchor}`,
        duration: 300
      });
    }
  }
}

3. 在style标签或者外部样式文件里设置swiper-item的样式。例如：

.swiper-item {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

以上代码中，我们使用vue的swiper组件实现了一个图片轮播效果，通过设置swiper-item的样式实现了图片高度根据图片宽度自适应。在mounted生命周期中使用uni.createSelectorQuery方法获取swiper-item的宽度，并将宽度保存在data中的itemWidth变量中。通过swiper组件的change事件，可以在swiper滑动到某个图片时触发相关事件。使用uni.pageScrollTo方法可以根据锚点的id来实现页面的滚动效果。

上一篇：uniapp写微信小程序实现电子签名

下一篇：uniapp 点击出现阴影罩层弹窗，同时点击阴影部分自动隐藏弹窗