微信小程序：scroll-view滚动组件

在开发微信小程序时，有时一些视图在手机指定的宽度和高度不够存放，那么可以放在scroll-view中。

在给scroll-view设置滚动的时候，分为三个步骤：

在给scroll-view设置滚动的时候，分为两个步骤：

滚动到指定的id元素位置，并且给滚动的过程添加动画

小程序实现满屏上下滑动效果

写的时候发现网上没有好用的，要么过于复杂，要么不太实用，我就自己整了个简单的

直接上代码部分

//wxml部分

<swiper indicator-dots="true" indicator-color="green" indicator-active-color="red" autoplay="true" interval="5000" duration="1000" circular="true" vertical="true">

<swiper-item wx:for="{{images}}">

<image src="{{item}}" mode="scaleToFill"></image>

</swiper-item>

</swiper>

下面是js部分，大部分都是自动生成的函数，只要在data里面存放地址就行，其他的可以不用管

// pages/template/templatejs

Page({

/

页面的初始数据

/

data: {

images: ["/pages/template/images/1png","/pages/template/images/2png","/pages/template/images/3png","/pages/template/images/4png"]

},

/

生命周期函数--监听页面加载

/

onLoad: function (options) {

},

/

生命周期函数--监听页面初次渲染完成

/

onReady: function () {

},

/

生命周期函数--监听页面显示

/

onShow: function () {

},

/

生命周期函数--监听页面隐藏

/

onHide: function () {

},

/

生命周期函数--监听页面卸载

/

onUnload: function () {

},

/

页面相关事件处理函数--监听用户下拉动作

/

onPullDownRefresh: function () {

},

/

页面上拉触底事件的处理函数

/

onReachBottom: function () {

},

/

用户点击右上角分享

/

onShareAppMessage: function () {

}

})

效果图

iphone5表现效果

在这里插入描述

iphone 12/13 Pro Max表现效果

在这里插入描述

本人前端一般般，可能会有问题，仅供参考

有上翻的动画，有商品展示，有分享，以及跳到视频库。之前网上找了很多，说swiper不能套video,现在已经可以了，第二种是把封面平铺下来，滚动的是封面那种，效果不好

首先用一个cover-view来控制上下滚空，监听touch事件,让swiper的index+1或者-1

swiper包裹这video,swiper不能自动滚动，但是必须要设置衔接的属性。

js里面onshow的那个地方是我们点击tabbar的时候不需要再次调接口，做的处理，如果不是tabbar,可以直接再onload里面调后端数据

注意的是，在开发中，只要不是本地的视频，掉了接口，然后ios的前两个视频就是黑屏，后来加上了custom-cache="{{false}}">就解决了

注意的另一个兼容的是，只有cover-view才能覆盖再原生video之上，像轮播购买记录的那个地方，cover-view不能包swiper,所有有的手机是被视频遮住的

如果不妨到tabbar里的话，就是全屏播放了，头部自定义，然后左右两边也没有黑色没撑满了

除了在js页面编写响应的逻辑之外，还需要再相应页面的json中写入以下配置，这个配置允许这个页面进行下拉刷新动作

特别需要注意的是：

此外，除了下拉刷新，有时候可能是在某个事件进行时触发刷新动作，此时可以调用wxstartPullDownRefresh(Object object) 此api的作用是：“ 开始下拉刷新。调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

转自： >

用户可以通过拖拽卡片，来将其移除。除此之外还添加了大量的交互式动画。

为了提升运行速度，采用了只生成两张卡片，并将其不断复用的方法。

当用户点击卡片式，记录此次的点击位置，并将这张卡片变小，产生按压的效果。

当用户拖拽卡片时，卡片会随着手指移动，并旋转。下方的卡片也会逐渐从透明度为0的状态显现出来。

当用户手指离开卡片时，判断是否要进行移除卡片 *** 作。如果需要，则根据卡片的方位移除该卡片，否则将卡片回归原位。

以下是移除卡片 *** 作，首先先将卡片移除屏幕，随后再将数据重新填充，回归原位，实现复用机制。

以上就是关于微信小程序：scroll-view滚动组件全部的内容，包括:微信小程序：scroll-view滚动组件、ios微信小程序上下滑动效果、微信小程序模仿抖音，全屏播放且有流畅的动画等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！