uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动

简介: uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动

#### uni-app实现swiper滑动放大缩小、实现scroll-view与swiper双向联动


# 先看效果图


![在这里插入图片描述](https://ucc.alicdn.com/images/user-upload-01/c66d0b4683df462f825cae11b656fa1e.gif#pic_center)



## 思路


1、利用scroll-view的scroll-into-view属性:值为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在**哪个方向滚动到该元素**

2、利用swiper的current属性:当前所在滑块的 index

## 布局代码


```

<template>

<view>

 <scroll-view class="scroll-top" scroll-x="true" show-scrollbar="false" :scroll-into-view="seqToView">

  <view class="scroll-view-item" v-for="(item,index) in list" :id="'seq-' + index" @click="tabClick(index)">

   <view class="scroll-view-item-view">

    <image class="scroll-top-item-image" :src="item.image"></image>

    <text class="scroll-top-item-text">{{item.title}}</text>

   </view>

  </view>

 </scroll-view>


 <swiper class="swiper-top" previous-margin='28px' next-margin='28px' @change="change" :current="currentIndex">

  <block v-for="(item,index) in swiperList" :key="index">

   <swiper-item>

    <view class="box" :animation="index == currentIndex?animationData:animationData2">

     <view class="imgcot">

      <image :src="item.image" mode="widthFix"></image>

     </view>

    </view>

   </swiper-item>

  </block>

 </swiper>


</view>

</template>

```


## 完整代码

```

<template>

<view>

 <scroll-view class="scroll-top" scroll-x="true" show-scrollbar="false" :scroll-into-view="seqToView">

  <view class="scroll-view-item" v-for="(item,index) in list" :id="'seq-' + index" @click="tabClick(index)">

   <view class="scroll-view-item-view">

    <image class="scroll-top-item-image" :src="item.image"></image>

    <text class="scroll-top-item-text">{{item.title}}</text>

   </view>

  </view>

 </scroll-view>


 <swiper class="swiper-top" previous-margin='28px' next-margin='28px' @change="change" :current="currentIndex">

  <block v-for="(item,index) in swiperList" :key="index">

   <swiper-item>

    <view class="box" :animation="index == currentIndex?animationData:animationData2">

     <view class="imgcot">

      <image :src="item.image" mode="widthFix"></image>

     </view>

    </view>

   </swiper-item>

  </block>

 </swiper>


</view>

</template>


<script>

export default {

 data() {

  return {

   list: [

    {

     image: '/static/image/member/es0-selected.png',

     title: '海关数据系统\n多账号免费用'

    },

    {

     image: '/static/image/member/es1-unselect.png',

     title: '建站推广服务\n抵用券'

    },

    {

     image: '/static/image/member/es2-unselect.png',

     title: '企业网站免费\n诊断1次'

    }, {

     image: '/static/image/member/es3-unselect.png',

     title: '海外广告投放\n免费开'

    }, {

     image: '/static/image/member/es4-unselect.png',

     title: '2CShop独立\n站商城试用'

    }, {

     image: '/static/image/member/es5-unselect.png',

     title: '提供优质服务\n商产品折扣'

    }

   ],

   swiperList: [

    {

     image: '/static/image/member/es0.png'

    },

    {

     image: '/static/image/member/es1.png'

    },

    {

     image: '/static/image/member/es2.png'

    },

    {

     image: '/static/image/member/es3.png'

    },

    {

     image: '/static/image/member/es4.png'

    },

    {

     image: '/static/image/member/es5.png'

    }

   ],

   currentIndex: 0,

   animationData: {},

   animationData2: {},

   currentSelect: 0,

   seqToView: '' // 滚动至序号

  }


 },

 methods: {

  tabClick(index) {

   if (index == this.currentSelect) {

    return

   } else {

    this.list[index].image = '/static/image/member/es' + index + '-selected.png'

    this.list[this.currentSelect].image = '/static/image/member/es' + this.currentSelect + '-unselect.png'

    this.currentSelect = index

    this.currentIndex = index

   }


  },

  change(e) {

   this.currentIndex = e.detail.current

   console.log(this.currentIndex)

   this.tabClick(this.currentIndex)

   this.seqToView = 'seq-' + this.currentIndex // 滚动至选中序号位置

  },

  scroll: function(e) {

   console.log(e)

   this.old.scrollTop = e.detail.scrollTop

  },

 },

 onLoad() {

  // 收缩

  var animation = uni.createAnimation({

   duration: 400,

   timingFunction: 'ease',

  })

  animation.scale(1).step()

  this.animationData = animation.export()

  // 展开

  var animation2 = uni.createAnimation({

   duration: 400,

   timingFunction: 'ease',

  })

  animation2.scale(0.94).step()

  this.animationData2 = animation2.export()

 },

}

</script>


<style>

.scroll-top {

 margin: 34rpx 54rpx 0 0;

 white-space: nowrap;

 width: 100%;

}


.scroll-view-item {

 display: inline-block;

 padding: 0 20rpx;

 font-size: 32rpx;

 color: #666666;

 line-height: 74rpx;

 position: relative;

}


.scroll-view-item-view {

 display: flex;

 flex-direction: column;

 align-items: center;

 flex-wrap: wrap;

}


.scroll-top-item-image {

 width: 90rpx;

 height: 90rpx;

}


.scroll-top-item-text {

 margin-top: 24rpx;

 width: 143rpx;

 font-size: 24rpx;

 font-family: PingFangSC-Medium;

 font-weight: 400;

 color: #372E1D;

 display: block;

 line-height: normal;

 text-align: center;

}


.swiper-top {

 height: 100vh;

 margin-top: 88rpx;

}


.swiper-block {

 height: 300rpx;

 width: 100%;

}


.swiper-item {

 display: flex;

 flex-direction: column;

 justify-content: center;

 align-items: flex-start;

 overflow: unset;

}


.slide-image {

 height: 250rpx;

 width: 520rpx;

 border-radius: 9rpx;

 box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);

 margin: 0rpx 30rpx;

 z-index: 1;

}


.active {

 transform: scale(1.14);

 transition: all 0.2s ease-in 0s;

 z-index: 20;

}

</style>


```

相关文章
|
小程序 Android开发 网络架构
uni-app中使用scroll-view滚到底部时多次触发scrolltolower
uni-app中使用scroll-view滚到底部时多次触发scrolltolower
1184 0
uni-app中使用scroll-view滚到底部时多次触发scrolltolower
uni-app swiper实现公告栏上下循环滚动(整理)
uni-app swiper实现公告栏上下循环滚动(整理)
|
JavaScript 小程序 前端开发
uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度
uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度
920 0
|
移动开发 前端开发
uni-app的scroll-view上拉加载数据请求防抖
解决scroll-view上拉到底部时触发多次数据请求的问题
868 0
uni-app的scroll-view上拉加载数据请求防抖
|
5天前
|
Web App开发 缓存 编解码
FFmpeg开发笔记(三十八)APP如何访问SRS推流的RTMP直播地址
《FFmpeg开发实战》书中介绍了轻量级流媒体服务器MediaMTX,适合测试RTSP/RTMP协议,但不适用于复杂直播场景。SRS是一款强大的开源流媒体服务器,支持多种协议,起初为RTMP,现扩展至HLS、SRT等。在FFmpeg 6.1之前,推送给SRS的HEVC流不受支持。要播放RTMP流,Android应用可使用ExoPlayer,需在`build.gradle`导入ExoPlayer及RTMP扩展,并根据URL类型创建MediaSource。若SRS播放黑屏,需在配置文件中开启`gop_cache`以缓存关键帧。
18 2
FFmpeg开发笔记(三十八)APP如何访问SRS推流的RTMP直播地址
|
10天前
|
Android开发 Kotlin
kotlin开发安卓app,如何让布局自适应系统传统导航和全面屏导航
使用`navigationBarsPadding()`修饰符实现界面自适应,自动处理底部导航栏的内边距,再加上`.padding(bottom = 10.dp)`设定内容与屏幕底部的距离,以完成全面的布局适配。示例代码采用Kotlin。
50 15
|
8天前
|
JSON API 数据格式
App Inventor 2 天气预报App开发 - 第三方API接入的通用方法
通过调用第三方天气api,填入必要的参数,通过Web客户端请求url。返回json格式的数据结果,使用AppInventor2解析json结果,显示到App上即可。
51 5
|
5天前
|
数据挖掘
美容院代理分销APP开发:拓展客户群体,增加收益利润
在当今数字化时代,手机APP已经成为人们生活中不可或缺的一部分。对于美容院来说,开发一款代理分销APP具有极高的价值。此APP不仅可以提升业务效率,还可以扩大客户群体,增加收益。
|
10天前
|
存储 API Android开发
kotlin开发安卓app,使用webivew 触发 onShowFileChooser, 但只能触发一次,第二次无法触发,是怎么回事。 如何解决
在Android WebView开发中,`onShowFileChooser`方法用于开启文件选择。当用户只能选择一次文件可能是因为未正确处理选择回调。解决此问题需确保:1) 实现`WebChromeClient`并覆写`onShowFileChooser`;2) 用户选择文件后调用`ValueCallback.onReceiveValue`传递URI;3) 传递结果后将`ValueCallback`设为`null`以允许再次选择。下面是一个Kotlin示例,展示如何处理文件选择和结果回调。别忘了在Android 6.0+动态请求存储权限,以及在Android 10+处理分区存储。
|
1月前
|
编解码 Java Android开发
FFmpeg开发笔记(三十一)使用RTMP Streamer开启APP直播推流
RTMP Streamer是一款开源的安卓直播推流框架,支持RTMP、RTSP和SRT协议,适用于各种直播场景。它支持H264、H265、AV1视频编码和AAC、G711、OPUS音频编码。本文档介绍了如何使用Java版的RTMP Streamer,建议使用小海豚版本的Android Studio (Dolphin)。加载项目时,可添加国内仓库加速依赖下载。RTMP Streamer包含五个模块:app、encoder、rtmp、rtplibrary和rtsp。完成加载后,可以在手机上安装并运行APP,提供多种直播方式。开发者可以从《FFmpeg开发实战:从零基础到短视频上线》获取更多信息。
62 7
FFmpeg开发笔记(三十一)使用RTMP Streamer开启APP直播推流

热门文章

最新文章