小程序scroll-view垂直滚动下设置高度问题

由于不同设备高度不同，所以box部分的高度需要是动态的；

有两种处理方式:

可以看到预览完全没问题，接下来往里面放一个滚动视图scroll-view，设置为可以垂直滚动，高度设置为100%样式

我发现一个tip，其实只要给外围的box一个高度即可，随便一个高度，因为设置了flex拉伸级别，这个高度不影响拉伸；在H5中是没意义的，但是这里可以解决问题；

实现如下图，点击右侧的A/B/C/D可以快速定位到该字母开头的城市列表。这类似于在html中用a标签实现的锚点跳跃功能。那在小程序中应该如何实现呢。在小程序官方文档中提到scroll-view，scroll-view有scroll-into-view这一属性

根据页面的实现，页面分为两大节点，滚动视图区域和定位标签

<scroll-view></<scroll-view> //这里面写页面的其他所有内容

<view></view> //这里面写快速定位的A/B/C/D

<scroll-view>根据页面又分为三层，搜索框层，热门城市层，按照字母排序的所有城市层，按照个人需求去实现

接下来讲如何实现锚点的定点跳跃，scroll-view的属性scroll-into-view用来定义scroll-view滚动到哪个区域显示，所以每块以字母开头的城市列表区域的id与scroll-into-view的值是绑定关系，而定位的标签用来改变scroll-into-view的值

实现步骤：

1 scroll-view 设置属性

scroll-y=‘true’运行其竖向滚动，scroll-with-animation=‘true’显示滚动动画，scroll-into-view与变量toView绑定。

2定义好每一个需要被快速定位的区域的ID名，如下的 inToViewFind、inToViewhot、inToViewA、inToViewB、inToViewC

3将定位标签A/B/C/D绑定好点击事件bindtap='scrollToViewFn'

在methods里面写好该点击事件

scrollToViewFn(e) {

var _id = etargetdatasetid;

thistoView='inToView' + _id;

this$apply();

}

4将变量toView初始化为inToViewFind

在data里面初始化toView的值

data ={

toView:'inToViewFind'

}

这样便可以实现html里面a标签的锚点跳跃的功能

多级联动菜单在许多的筛选场景应用十分广泛。

先看看效果图：

menuwxml

menuwxss

menujsp

menuwxss

menujs

menuwxml

menuwxss

menujs

这里主要针对一个菜单栏进行详细讲解，其余两个原理相同。

游戏

menuwxml

这里推荐大家使用 <scroll-view></scroll-view> 组件，这样超过限定的高度的话，就可以在内部产生滚动条，整体布局不会乱。使用 <scroll></scroll> 组件的时候，记得要开启滚动的方向（scroll-y表示纵向，scroll-x表示横向），这些属性默认是关闭的。

menuwxss

注意：使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

menujs

menujs部分主要的难点就是wxml和js之间的数据交互，这里很容易弄晕，尤其是对自己定义的变量弄清楚是什么意思。在这里我画了一个示意图来讲解这个难点。

最后给大家提供该项目的github项目，直接抓下来就可以打开使用，只需对显示的数据进行修改即可。

微信小程序中实现滚动条事件的绑定方法如下：

1、使用onPageScroll回调函数，此函数接收一个Object对象，其中包含滚动条相关信息，如滚动条顶部的位置等。

2、可以通过在页面的js文件中使用onPageScroll函数来绑定滚动条事件，从而实现你想要的功能。

本篇文章给大家介绍一下在微信小程序中怎么让scroll-view按照指定位置滚动，无需在写额外的js脚本，就可获得极佳的体验，希望对大家有所帮助！

背景是这样的，微信小程序有一个tab切换页面，tab切换页面有两个内容框，我是使用scroll-view进行制作，然后在切换tab页面时，相应的scroll-view里的滚动条需要置顶处理。相关学习推荐：小程序开发教程

我们可以看到官方文档描述scroll-view里有一个scroll-into-view属性，该属性的描述如下

scroll-into-view的值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

那么我们可以在这个属性里大作文章，只要在scroll-view里放置一个id值为设置的一个自定义值就可以实现切换tab时，对应的内容框滚动条都自动滚到顶部，如下面代码所示，下面代码是我使用Taro小程序框架演示的，原生的也同理。

import Taro from '@Tarojs/Taro'

import { View } from '@Tarojs/components'

import { AtTabs, AtTabsPane } from 'Taro-ui'

export default class Index extends TaroComponent {

constructor () {

super(arguments)

thisstate = {

current: 0,

}

}

handleClick (value) {

thissetState({

current: value

})

}

render () {

const tabList = [{ title: '标签第一页' }, { title: '标签第二页' }, { title: '标签第三页' }]

return (

<AtTabs current={thisstatecurrent} tabList={tabList} onClick={thishandleClickbind(this)}>

<AtTabsPane current={thisstatecurrent} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

<View id='content-0'></View>

标签页一的内容

</ScrollView>

</AtTabsPane>

<AtTabsPane current={thisstatecurrent} index={1} >

<ScrollView scrollY scrollIntoView='content-1'>

<View id='content-1'></View>

标签页二的内容

</ScrollView>

</AtTabsPane>

<AtTabsPane current={thisstatecurrent} index={2} >

<ScrollView scrollY scrollIntoView='content-2'>

<View id='content-2'></View>

标签页三的内容

</ScrollView>

</AtTabsPane>

</AtTabs>

)

}

}

如第一个tab的scroll-view里放置一个id值为content-0的view，那么在切换tab页时，scroll-view会根据我们设置的scroll-into-view属性定位到子元素的id上，到达滚动条自动置顶的效果

<AtTabsPane current={thisstatecurrent} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

<View id='content-0'></View>

标签页一的内容

</ScrollView>

</AtTabsPane>

同理的，假如需要滚动条滚到最低下，把相应的子元素id放到最低下即可，例如某些聊天界面，需要定位到最新那条

<AtTabsPane current={thisstatecurrent} index={0} >

<ScrollView scrollY scrollIntoView='content-0'>

标签页一的内容

<View id='content-0'></View>

</ScrollView>

</AtTabsPane>

更多编程相关知识，请访问：编程视频！！

微信小程序固定头部不动的步骤如下：

1、在小程序自带的方法onPageScroll中可以得到滑动距离顶部的距离，在data公共数据中定义scrollTop。

2、得到滑动距离后，当页面滑动超出需要固定元素距离顶部的距离后使用css样式控制其定位，因此为要在scroll-view中定义class="title{{scrollTop>30'topnav'：''}}"30就是我需要定义的模块距离顶部的距离，当超过这个距离就会执行css的topnav样式。

3、否则就执行愿有的css样式。

以上就是关于小程序scroll-view垂直滚动下设置高度问题全部的内容，包括:小程序scroll-view垂直滚动下设置高度问题、小程序如何使用锚点实现定点跳跃、微信小程序之多级联动菜单等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！