全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[seo哪个公司最厉害]微信小程序scroll-view组件详解

  本文主要介绍了微信小程序组件之scroll-view的详解的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容•◇□•,需要的朋友可以参考下,希望能帮助到大家。钦州市小程序制作公司

  微信小程序组件之srcoll-view的详解

  今天记录一下scroll-view学习中遇到的问题及解决办法,希望能对其他同学有所帮助。
 

  首先展示一下想达到的效果。↓ vertical scroll实现上下滚动,horizontal实现左右滚动。

  先附上wxml的代码。

  

<▪◁○;view class="container">▽△◁; 
 <view>○★▷△; 
 <•○=•;text>▼▽•;vertical scroll<▽☆;/text>▪◆……; 
 <★●■;scroll-view scroll-y class="scroll-view-y" scroll-top="-◇•;{{scrollTop}}"> 
 <•…-;view id="green" class="■☆;scroll-y-item bg_green"-★■;>▽▲;<★■;/view> 
 <view id="red" class="scroll-y-item bg_red"▲●▽;>★▲•;<…◇;/view> 
 <-◆;view id="blue" class="scroll-y-item bg_blue"=□…;></view> 
 <view id="……▷☆;yellow" class="•☆☆△;scroll-y-item bg_yellow"▲▪•★;></view>△•; 
 </scroll-view> 
 <▽▷☆;/view> 
 <view> 
 <text>▼•△•;horizontal scroll</text>•…◇▲; 
 <scroll-view scroll-x class="=◁;scroll-view-x" style="width●-=☆:100%"> 
 <view class="☆◇▲;scroll-view-x"•▲●;>▼…; 
 <▪◆○;view class="◆◁▷;scroll-x-item bg_green"■▷▲▽;>▽◇=△;</view> 
 <view class="scroll-x-item bg_red"▼•▲…;><■…▪;/view> 
 <view class="▼▲▼▼;scroll-x-item bg_blue">○•;<◁◇=•;/view>△…; 
 <•▲;view class="scroll-x-item bg_yellow"></view>•□; 
 <•□○;/view> 
 </scroll-view> 
 <◇▽★=;/view> 
</view>

 

  1▪□▲◆.整个界面由一个view包装起来,该view的class为创建quickStart时自带,可根据需要自己调整。之后,两个view各包装一个scrollview及其上面的text文本。
 

  2.第一个scroll-view需竖直滚动▷◇,为其设置scroll-y="{{true}}"(或者直接写scroll-y)=▷。该scrollview的class为◇△•○“scroll-view-y”,之后会附上代码。scroll-top属性设置滚动条的初始位置◁-■,scrollTop在js文件的data中声明赋值(不需要可去掉)。
 

  3▼☆◇-.scrollview中四个不用颜色的view▪•▽,除颜色外其他属性相同••。
 

  为竖直scrollview的wxss代码

  

.scroll-view-y { 
 height: 200px; 
 width△▼▼●: 100%○☆□; 
} 
.scroll-y-item { 
 height: 70px; 
 width: 100%; 
}

 

  4.水平方向的scrollview与竖直方向基本类似▪▷▼,着重说一下区别。[seo哪个公司最厉害]
 

  (1) 竖直方向的scrollview直接包住4个不同颜色的view,30 2020.10 [宁波seo公司立找久澳]CSS和JS的加载和执行详解 HTML渲染过程的一些特点 顺序执行,并发加载 通过词法分析,通过HTML生成Token对象(当前节点的所有子节点生成后,才会通过next token获取到当前节点的兄弟节点)●▲◇,最终生成Do,水平方向需要先用view包住各颜色块-★▲,这是为了保证各颜色块水平排布•●☆●。
 

  (2) wxss文件

  为水平scrollview的wxss代码,scroll-view-x为水平滑块的属性☆▲▼,scroll-x-item为水平滑块中各颜色块的属性。

  

.scroll-view-x { 
 width: 300px○◇-△; 
 height=◇▲: 100px; 
 display-■△□: flex▷▽-◁; 
 overflow: scroll▲◁△; 
} 
.scroll-x-item { 
 width△●▲: 95px; 
 height□▼•▪: 100%; 
 display: inline-table; 
}

 

  可以看到:
 

  ①水平滑块多了两个属性,display和overflow。display设置为flex弹性伸缩显示=▪■,overflow设置当子布局超出父容器时scroll展示▽△。兴化市小程序制作公司
 

  ②颜色块display属性设置为 inline-table,这个很重要!!•◇!最开始没有写这个属性…□◇,很久都无法实现scrollview的水平滑动--。在我不断的尝试下○▽▽▷,终于试出来了,很开心!吐舌头

  附上微信官方属性说明↓

  

属性名 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时(单位px)▽…,触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-top Number   设置竖向滚动条位置
scroll-left Number   设置横向滚动条位置
scroll-into-view String   值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动▼●,则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时△◁▲,滚动条返回顶部◁●,只支持竖向
bindscrolltoupper EventHandle   滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle   滚动到底部/右边□▽◇,会触发 scrolltolower 事件
bindscroll EventHandle   滚动时触发,event○○-□.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX▷☆, deltaY}

  相关推荐-☆:

  关于scroll-view组件的4篇文章推荐

  scroll-view完成列表页的方法详解

  微信小程序开发实现scroll-view隐藏滚动条方法介绍

  以上就是微信小程序scroll-view组件详解的详细内容◆••,更多请关注久澳传媒编程栏目其它相关文章!

[seo哪个公司最厉害]微信小程序scroll-view组件详解

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。