当前位置：首页 > uni-app

uniapp滑动图标

2026-03-04 23:44:15uni-app

在UniApp中实现滑动图标功能

UniApp可以通过多种方式实现滑动图标效果，以下是几种常见方法：

使用swiper组件实现横向滑动图标

<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000">
  <swiper-item v-for="(page, index) in iconPages" :key="index">
    <view class="swiper-item">
      <view v-for="(item, i) in page" :key="i" class="icon-item">
        <image :src="item.icon" mode="aspectFit"></image>
        <text>{{item.name}}</text>
      </view>
    </view>
  </swiper-item>
</swiper>

data() {
  return {
    iconPages: [
      [
        {icon: '/static/icon1.png', name: '图标1'},
        {icon: '/static/icon2.png', name: '图标2'},
        // 更多图标...
      ],
      // 更多页...
    ]
  }
}

使用scroll-view实现自由滑动

<scroll-view scroll-x class="scroll-view">
  <view class="scroll-content">
    <view v-for="(item, index) in iconList" :key="index" class="icon-item">
      <image :src="item.icon" mode="aspectFit"></image>
      <text>{{item.name}}</text>
    </view>
  </view>
</scroll-view>

.scroll-view {
  white-space: nowrap;
  width: 100%;
}
.scroll-content {
  display: inline-block;
}
.icon-item {
  display: inline-block;
  width: 80px;
  text-align: center;
  margin-right: 10px;
}

实现拖拽排序功能

<movable-area class="movable-area">
  <movable-view v-for="(item, index) in icons" 
                :key="item.id"
                class="movable-view"
                direction="all"
                :x="item.x"
                :y="item.y"
                @change="onChange(index, $event)">
    <image :src="item.icon"></image>
  </movable-view>
</movable-area>

data() {
  return {
    icons: [
      {id: 1, icon: '/static/icon1.png', x: 0, y: 0},
      {id: 2, icon: '/static/icon2.png', x: 100, y: 0},
      // 更多图标...
    ]
  }
},
methods: {
  onChange(index, e) {
    this.icons[index].x = e.detail.x
    this.icons[index].y = e.detail.y
  }
}

使用第三方组件库

uni-ui和uView等第三方组件库提供了更丰富的滑动图标组件：

<uni-swipe-action>
  <uni-swipe-action-item v-for="(item,index) in list" :key="index">
    <template v-slot:left>
      <view class="swipe-btn" @click="onClick('fav', item.id)">
        <uni-icons type="star" size="20"></uni-icons>
      </view>
    </template>
    <view class="content">{{item.name}}</view>
  </uni-swipe-action-item>
</uni-swipe-action>