微信小程序之可滚动视图容器组件 scroll-view

标签：display   osi   inline   底部   上海   xss   组件   全局   position   

1. 纵向滚动 scroll-y

• 当 设置为scroll-y 时, 需要将其高度设为固定值
• 如果整个页面，即最外层标签为scroll-view，需要并将其高度设为100%，也需要将page设为100%（可在app.wxss中设置）。

示例：

html 文件：

<!--pages/index/index.wxml-->
<scroll-view scroll-y="true" lower-threshold="50" bindscrolltolower="lower">
    <view>content</view>
    <view>content</view>
    <view>content</view>
    <view>content</view>
    <view>content</view>
    <view>content</view>
</scroll-view>

css 文件：

/* pages/index/index.wxss */
scroll-view {
    height: 100%;
}

bindscrolltolower 绑定tap事件： 滚动到底部，会触发。

全局 css 文件：

/**app.wxss**/
 page {
  height: 100%;
}

2. 横向滚动 scroll-x

• 当 设置为scroll-x 时, 需要将其宽度设为固定值
• 规定内部的文本不要换行：white-space:nowrap;
• 设置其内部文本 为 行内块元素
• 如果整个页面，即最外层标签为scroll-view，需要并将其高度设为100%，也需要将page设为100%（可在app.wxss中设置）。

示例

html 文件：

<!--pages/index/index.wxml-->
<scroll-view class="scroll-view" scroll-x >
    <view wx:for='{{scroll}}' wx:key='{{index}}'>
        <image src='{{item.img}}'></image>
        <text>{{item.title}}</text>
    </view>  
</scroll-view>

css 文件：

/* pages/index/index.wxss */
.scroll-view { 
    width: 100%;
    height: 240rpx;
    white-space:nowrap;  /* 规定段落中的文本不进行换行 */
}
.scroll-view view {
    width:200rpx;
    height:200rpx; 
    padding: 0 16rpx; 
    box-sizing:content-box;
    display:inline-block;  /* 设置行内块元素 */
    position: relative;
}
.scroll-view view image {
    width:200rpx;
    height:200rpx; 
    border-radius: 10rpx;
    opacity: .9;
}
.scroll-view view text {
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
    position: absolute;
    bottom: 20rpx;
    left: 40rpx;
}

js 文件：

// pages/index/index.js
Page({ 
    data: {
        scroll: [
            {
                img: "https://***.png_200x200q80.jpg",
                title: '北京'
            },
            {
                img: "https://***.jpg_.webp",
                title: '上海'
            },
            {
                img: "https://***.jpg_.webp",
                title: '青岛'
            },
            {
                img: "https://***.jpg_.webp",
                title: '大连'
            },
            {
                img: "https://***.jpg_.webp",
                title: '丽江'
            }
        ]
    }

微信小程序之可滚动视图容器组件 scroll-view

标签：display   osi   inline   底部   上海   xss   组件   全局   position   

原文地址：https://www.cnblogs.com/cckui/p/9999730.html