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

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: '丽江'
            }
        ]
    }

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

时间: 2024-11-13 07:52:19

微信小程序之可滚动视图容器组件 scroll-view的相关文章

小程序-文章:微信小程序常见的UI框架/组件库总结

ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库. 1:WeUI  小程序–使用教程 https://weui.io/ 官方介绍:WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.小程序开发中最常用到的一款框架,受广大

CK2020微信小程序入门与实战 常用组件API开发技巧项目实战

新年伊始,学习要趁早,点滴记录,学习就是进步! 随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到程序开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了.对于学习有困难不知道如何提升自己可以加扣:1225462853  获取资料. 下载地址:https://pan.baidu.com/s/1hsU5EIS 微信小程序入门与实战 常用组件API开发技巧项目实战 小程序官方正式公告,开放了更多的入口,个人开发者可以申请

微信小程序学习笔记-2-常用组件介绍

微信小程序常用组件 组件的定义: 开发者可以利用微信团队提供的框架中的一系列基础组件进行快速的开发,什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之间. 形式: <tagname property="value"> Content goes here </tagname> 例如: <view class="container">

微信小程序入门与实战/常用组件/API/开发技巧/项目实战 共11章

实战开发电影资讯微信小程序 学习之前需要掌握JavaScript和CSS基础 ----------------课程目录---------------- 第1章:什么是微信小程序 开篇及课程特色介绍 直观感受一下微信小程序 小程序适合做什么样的应用 对开发者的影响 学习基础 小作业 第2章:环境搭建与开发工具 开篇介绍及下载工具 小程序目前情况及限制 小程序开发工具介绍 第3章:开始小程序之旅 本章内容简介 官方种子项目介绍与小程序的文件结构 新建我们自己的项目:ReaderMovie 开始制作项

微信小程序入门与实战 常用组件API开发技巧项目实战

第1章 什么是微信小程序?介绍小程序的特点与适用场景.对开发者的影响以及课程特色!七月老师小程序进阶课<纯正商业应用--微信小程序实战>与<微信小程序商城构建全栈应用>已上线,全面进阶小程序! 第2章 小程序环境搭建与开发工具介绍小程序开发工具的下载与安装.微信Web开发者工具主要功能简介 第3章 从一个简单的"欢迎"页面开始小程序之旅完成第一个小程序页面,并学习小程序的基本目录与文件结构,View.Image.Text组件,RPX自适应单位,Flex弹性盒子模

微信小程序内如何使用vant-weapp组件

vant-weapp文档:https://youzan.github.io/vant-weapp/#/quickstart 快速上手: 1.在项目文件夹根目录下打开终端且输入命令npm init初始化生成一个package.json的文件 2.通过npm安装:npm i @vant/weapp -S --production 3.构建npm包: 先打开微信开发者工具,点击 工具 -> 构建 npm: 构建完成后,会生成一个 miniprogram_npm文件夹就成功了 4.构建完成后,使用前准备

【微信小程序】解决 竖向&lt;scroll-view&gt;组件 “竖向滚动页面出现遮挡”问题

问题图: 问题原因: <scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}"  scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll" bi

微信小程序 select 下拉框组件

一.源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二.效果图 录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. select.wxml <view class="select-box"> <view class="select-current" catchtap="openClose"> <text class="current-name

微信小程序(3)——常用的组件

view: view是小程序中的视图容器之一,似于html中的<div>标签 <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class=