《微信小程序开发从入门到实战》学习九十一

news/2024/7/20 3:01:51 标签: 微信小程序, 学习, 小程序

7.1 视图容器组件

7.1.2 scroll-view组件

scroll-view组件时是滚动的视图容器,可在竖直方向或水平方向上滚动,展示超出屏幕高度或宽度的内容。

使用竖直方向滚动时,需要通过wxss的height样式给scroll-view设置一个固定高度,超出设定高度的内容会被隐藏,通过页面滚动可以将它们显示出来。

scroll-view组件支持的属性如下:

scroll-x:默认值false,允许横向滚动

scroll-y:默认值false,允许纵向滚动

upper-threshold:默认值50,距顶部/左边多远时,触发scrolltoupper事件

lower-threshold:默认值50,距底部/右边多远时,触发scrolltolower事件

scroll-top:设置竖向滚动条位置

scroll-left:设置横向滚动条位置、

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

scroll-with-animation:默认值为false,在设置滚动条时使用动画过渡

enable-back-to-top:默认值为false,iOS单击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向。

bindscrolltoupper:滚动到顶部/左边时触发

bindscrolltolower:滚动到底部/右边时触发

bindscroll:滚动时触发,event.detail = {scrollLeft,scrollTop,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}

upper-threshold和lower-threshold是两个边界值,用于设置触发scrolltoupper事件,scrolltolower事件,两个属性单位默认为px,从基础库2.4.0起来可以传入单位(rpx或px)

scroll-top,scroll-left,scroll-into-view都用于设置滚动条位置,应该设置为变量而不是固定值。即

scroll-top = "{{scrollTop}}"

scroll-into-view = "{{toView}}"

scroll-top,scroll-left单位默认为px,从基础库2.4.0起来可以传入单位(rpx或px)

scroll-into-view通过子组件设定滚动的位置,id属性必须唯一,即同一页面的两个组件不能取相同的值,例如下面这段代码,如果在JS文件中奖toView的值改为view2,scroll-view就会滚动到第二个view的位置。

<scroll-view scroll-y style="height:20px;" scroll-into-view="{{toView}}">

  <view id="view1" class="scroll-view-item"></view>

  <view id="view2" class="scroll-view-item"></view>

</scroll-view>


http://www.niftyadmin.cn/n/5342597.html

相关文章

数据采集与预处理02 :网络爬虫实战

数据采集与预处理02 &#xff1a;网络爬虫实战 爬虫基本知识 1 HTTP的理解 URL uniform resource locator. 是统一资源定位符&#xff0c;URI identifier是统一资源标识符。几乎所有的URI都是URL。 URL前部一般可以看到是HTTP还是HTTPS&#xff0c; 这是访问资源需要的协议…

关于网络协议的笔记

简介&#xff1a; 协议&#xff0c;网络协议的简称&#xff0c;网络协议是通信计算机双方必须共同遵从的一组约定。如怎么样建立连 接、怎么样互相识别等。只有遵守这个约定&#xff0c;计算机之间才能相互通信交流。它的三要素是&#xff1a;语 法、语义、时序。 为了使数据…

浪花 - 添加队伍业务开发

一、接口设计 1. 请求参数&#xff1a;封装添加队伍参数 TeamAddRequest package com.example.usercenter.model.request;import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableField; import com.baomidou.mybatisplus.ann…

361. 观光奶牛(小数二分,spfa判断正环,01分数规划)

361. 观光奶牛 - AcWing题库 给定一张 L 个点、P 条边的有向图&#xff0c;每个点都有一个权值 f[i]&#xff0c;每条边都有一个权值 t[i]。 求图中的一个环&#xff0c;使“环上各点的权值之和”除以“环上各边的权值之和”最大。 输出这个最大值。 注意&#xff1a;数据保…

自然语言处理--基于HMM+维特比算法的词性标注

自然语言处理作业2--基于HMM维特比算法的词性标注 一、理论描述 词性标注是一种自然语言处理技术&#xff0c;用于识别文本中每个词的词性&#xff0c;例如名词、动词、形容词等&#xff1b; 词性标注也被称为语法标注或词类消疑&#xff0c;是语料库语言学中将语料库内单词…

uni-app (安卓、微信小程序)接口封装 token失效自动获取新的token

一、文件路径截图 1、新建一个文件app.js存放接口 //这里存放你需要的接口import {request} from /utils/request.js //这个文件是请求逻辑处理 module.exports {// 登录 -- 注册perssonRegister: (data) > { // 供应商注册 return request({url: manageWx/Login/perssonR…

Clamp cell 介绍

Clamp cell&#xff08;夹持单元&#xff09;是芯片设计中用于限制电路中某个节点的电压范围的重要电路单元。它的主要目的是确保电路中的信号或电源电压不会超出安全范围&#xff0c;从而保护芯片免受潜在的损坏或性能问题。 电压限制&#xff1a; Clamp cell的主要功能之一是…

数据分析的理念、流程、方法、工具(下)

四、用户分群 1、用户分群 用户分群是精细化运营的基础要求&#xff0c;也是数据分析的最基础方式。对用户进行分群&#xff0c;能帮助我们了解每个细分群体用户的变化情况&#xff0c;进而了解用户的整体现状及发展趋势。同时&#xff0c;由于运营资源本身有限&#xff0c;不…