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

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

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

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

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

微信小程序页面滑到到底部，继续上拉跳转到其他界面：

以下方法不可行：

1实现这功能不能用onReachBottom，onReachBottom只有页面滑到到底部才触发，继续上拉无法再触发onReachBottom；

2如果界面上包含其他内容，底部是列表，界面绑定页面下拉刷新方法，这种情况也不能使用scroll-view的上拉加载更多方法，会导致页面下拉和列表srcoll-view下拉2个事件冲突，触发不灵敏

解决办法：

首页上监听 touchmove，然后首页加载完的时候查询一下整个页面的高度。touchmove的时候判断已经是到底了，就跳转A页面呗。不过需要注意会触发多次，注意过滤

1、将scroll-view的scroll-y属性设置为false，这样可以禁用scroll-view的纵向滑动功能，避免滑动条出现。

2、在input组件绑定focus和blur事件，当input组件被聚焦时，将scroll-view组件滚动到输入框所在的位置，当input组件失去聚焦时，将scroll-top值设置为0，这样可以让页面回到最顶部。

客官可移步 >

最近公司开发的小程序中，用到了小程序的picker组件，写了个二级级联动（三级联动同理）。从页面上看，明显数据已经是加载上去了，而且也确实是正确的

从这张图上可以看到，明明第二列的数组已经设置是长度为一个，但是在页面上，却显示了两个。

排查下来，就是文本中，name不能重名。必须保持是唯一的。

当我们把name设置成唯一值的时候，就不会有问题了。

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

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

直接上代码部分

//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表现效果

在这里插入描述

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

让微信小程序中间的图标也跟着图上下滑动方法如下：

1、在WXML文件中创建一个固定高度的区域，并设置其为可滚动的。

2、在该区域内添加两个元素：一个用于显示上下滑动的，另一个用于显示图标。

3、在CSS样式文件中，对这两个元素分别设置相应的位置和样式。其中，上下滑动的需要设置position：absolute。top：0。left：0。width：100%。height：auto。z-index：-1。等属性，使其能够覆盖住整个区域并与图标区分开来。而图标元素则需要设置position：relative。等属性来保证其相对于父元素的位置不变。

4、使用JavaScript监听区域的滚动事件，获取当前滚动位置，并将其赋值给图标元素的top属性，以实现图标随着滚动上下移动。

以上就是关于微信小程序：scroll-view滚动组件全部的内容，包括:微信小程序：scroll-view滚动组件、微信小程序页面滑到到底部，继续上拉跳转到其他界面、微信小程序scrollview软键盘加载会出现滚动条放下会调等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！