小程序滚动页面不能滚动解决方案一

在设计小程序页面的时候，想要设置滚动页面左右滚动，写了scroll-view的scroll-x，但是还是不能左右滚动。测试很多style样式，最后发现设置了min-width就可以实现滚动。

class样式：

效果如下：

1基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2属性类型

<ul>

<li>Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number 数字 1

, 25</li>

<li>String 字符串 "string"</li>

<li>Array 数组 [ 1, "string" ] </li>

<li>Object 对象 { key: value } </li>

<li>EventHandler 事件处理函数名 "handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any 任意属性 </li>

</ul>

3共同属性类型

id , class , style , hidden , data- , bind / catch

4特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image ， video 视频

地图

map 地图

画布Canvas

canvas 画布

flex: vt折曲，使收缩； vi玩去，收缩

小程序滚动条无法滚动到底，原因可能是触发下拉加载数据时，当原来数组元素大于100条时，会先把之前的数组截取后40条数据，再拼接新的10条数据赋值给数组来展示页面，这个时候因为数据变更导致滚动条失效。

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

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

组件说明:

可滚动视图区域。

组件用法：

纵向滚动用法

Tip:

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height，否则无法滚动。

当滚动到顶部时会触发bindscrolltoupper事件（具体可留意GIF输出）

当滚动到底部时会触发bindscrolltolower事件（具体可留意GIF输出）

效果图：

wxml

<scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">

    <view id="green" class="scroll-view-item bc_green"></view>

    <view id="red"  class="scroll-view-item bc_red"></view>

    <view id="yellow" class="scroll-view-item bc_yellow"></view>

    <view id="blue" class="scroll-view-item bc_blue"></view>

</scroll-view>

<view class="btn-area">

      <button size="mini" bindtap="tap">click me to scroll into view </button>

      <button size="mini" bindtap="tapMove">click me to scroll</button>

</view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

  data: {

    toView: 'green',

    scrollTop: 100,

    scrollLeft: 0

  },

  //滚动条滚到顶部的时候触发

  upper: function(e) {

    consolelog(e)

  },

  //滚动条滚到底部的时候触发

  lower: function(e) {

    consolelog(e)

  },

  //滚动条滚动后触发

  scroll: function(e) {

    consolelog(e)

  },

  //点击按钮切换到下一个view

  tap: function(e) {

    for (var i = 0; i < orderlength; ++i) {

      if (order[i] === thisdatatoView) {

        thissetData({

          toView: order[i + 1]

        })

        break

      }

    }

  },

  //通过设置滚动条位置实现画面滚动

  tapMove: function(e) {

    thissetData({

      scrollTop: thisdatascrollTop + 10

    })

  }

})

css

scroll-view_H{

  white-space: nowrap;

}

scroll-view-item{

  height: 200px;

}

scroll-view-item_H{

  display: inline-block;

  width: 100%;

  height: 200px;

}

横向滚动用法

Tip:

横向滚动无法使用scroll-into-view属性。

当滚动到最左边时会触发bindscrolltoupper事件（具体可留意GIF输出）

当滚动到最右边时会触发bindscrolltolower事件（具体可留意GIF输出）

效果图：

wxml

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"  bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-left="{{scrollLeft}}">

    <view id="green" class="scroll-view-item_H bc_green"></view>

    <view id="red"  class="scroll-view-item_H bc_red"></view>

    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>

    <view id="blue" class="scroll-view-item_H bc_blue"></view>

</scroll-view>

js

var order = ['red', 'yellow', 'blue', 'green', 'red']

Page({

  data: {

    toView: 'green',

    scrollTop: 100,

    scrollLeft: 0

  },

  //滚动条滚到顶部的时候触发

  upper: function(e) {

    consolelog(e)

  },

  //滚动条滚到底部的时候触发

  lower: function(e) {

    consolelog(e)

  },

  //滚动条滚动后触发

  scroll: function(e) {

    consolelog(e)

  },

  //点击按钮切换到下一个view

  tap: function(e) {

    for (var i = 0; i < orderlength; ++i) {

      if (order[i] === thisdatatoView) {

        thissetData({

          toView: order[i + 1]

        })

        break

      }

    }

  },

  //通过设置滚动条位置实现画面滚动

  tapMove: function(e) {

    thissetData({

      scrollLeft: thisdatascrollLeft + 10

    })

  }

})

wxss

scroll-view_H{

  white-space: nowrap;

}

scroll-view-item{

  height: 200px;

}

scroll-view-item_H{

  display: inline-block;

  width: 100%;

  height: 200px;

}

主要属性：

属性类型默认值描述

scroll-xBooleanfalse允许横向滚动

scroll-yBooleanfalse允许纵向滚动

upper-thresholdNumber50距顶部/左边多远时（单位px），触发 scrolltoupper 事件

lower-thresholdNumber50距底部/右边多远时（单位px），触发 scrolltolower 事件

scroll-topNumber设置竖向滚动条位置

scroll-leftNumber设置横向滚动条位置

scroll-into-viewString值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部

bindscrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件

bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件

bindscrollEventHandle滚动时触发，eventdetail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

给外面加一个scroll-view组件实现滚动显示。

当插入的的长度超屏幕的高度时，会导致高度被压缩。解决的方法是，给外面加一个scroll-view组件实现滚动显示，添加属性mode="widthFix"使得宽度完整显示。

以上就是关于小程序滚动页面不能滚动解决方案一全部的内容，包括:小程序滚动页面不能滚动解决方案一、微信小程序_组件、小程序滚动条无法滚动到底等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！