首页 > 其他分享 >使用StoryBoard设置Scrollview的横向滚动不用一行代码

使用StoryBoard设置Scrollview的横向滚动不用一行代码

时间:2023-07-29 20:00:34浏览次数:33  
标签:控件 StoryBoard 滚动 scrollview Scrollview 约束 添加 ScrollView View

1).创建一个空工程Single类型的工程,然后打开故事版(StoryBoard)在ViewController上添加scrollview

使用StoryBoard设置Scrollview的横向滚动不用一行代码_边距

2).然后对scrollview添加约束,上下左右全部都是0就可以(注意:在添加上下左右约束的时候一定要取消Constrain to margins ,否则添加完的约束会出现左右各缺少20像素的边距)

使用StoryBoard设置Scrollview的横向滚动不用一行代码_控件_02

3).添加完成约束后直接更新scrollview的frame.随后在scrollview上添加一个view并且添加约束上下左右也都是0.

使用StoryBoard设置Scrollview的横向滚动不用一行代码_边距_03

4).在添加完成约束后会发现view上的约束报错误了,不过没事我们继续操作现在做的是scrollview的左右滑动,所以给view添加个横向约束.

使用StoryBoard设置Scrollview的横向滚动不用一行代码_故事版_04

5).在添加完成这个约束后需要给当前的View添加个宽度因为需要让View在ScrollView上可以滑动,所以设置View的宽度为ScrollView的宽度.选中View按住Ctrl键指向ScrollView,然后选择等宽.

使用StoryBoard设置Scrollview的横向滚动不用一行代码_控件_05

6).在操作完这一步后会发现以前的错误都没有了这时候我们更新下View的frame.最后一步就是设置当前可以滑动的视图是几个ScrollView的宽度.选中当前的View查看添加好的约束的位置找到Equal Width to这个双击打开.然后设置成两倍大小.

使用StoryBoard设置Scrollview的横向滚动不用一行代码_故事版_06

7).最后就可以看到这样的情景,选中的就是当前View的宽度.

使用StoryBoard设置Scrollview的横向滚动不用一行代码_故事版_07

8).现在在上面添加控件,在控制器上添加两个View(这只是测试用添加任何控件都是可以的).最好两个View平行放置好添加约束.然后给View添加约束左边的控件添加上下左约束然后设置和ScrollView等宽,右边控件添加上下左右约束(注意添加左约束的时候一定要确定是对左边控件添加的约束),然后设置和ScrollView等宽.

使用StoryBoard设置Scrollview的横向滚动不用一行代码_控件_08

使用StoryBoard设置Scrollview的横向滚动不用一行代码_故事版_09

使用StoryBoard设置Scrollview的横向滚动不用一行代码_故事版_10

使用StoryBoard设置Scrollview的横向滚动不用一行代码_控件_11

9).最后更新这两个View的frame就可以运行查看效果了.

使用StoryBoard设置Scrollview的横向滚动不用一行代码_边距_12

10).好的结束了这样就可以实现一行代码不写实现ScrollView的设置.

标签:控件,StoryBoard,滚动,scrollview,Scrollview,约束,添加,ScrollView,View
From: https://blog.51cto.com/u_11806040/6895106

相关文章

  • el-select 无限下拉滚动加载数据
     <template> <div>  <el-form   ref="saveParameter"   :model="saveParameter"   inline   inline-message   style="margin:10px"  >   <el-form-itemlabel="供应商"prop=&......
  • CSS隐藏滚动条
    一、纯CSS+div样式隐藏在需要滚动的元素外面再套一个div,给最外面的div设置样式overflow:hidden,宽度比需要滚动的元素小;之后给需要滚动的元素设置样式overflow-x:hidden;overflow-y:scroll;<styletype="text/css">*{margin:0;padding:0;}.box{width:100px;height:300px;......
  • wpf ScrollViewer 滚动动画
    wpfScrollViewer滚动动画:<Windowx:Class="WpfTest.FloatTextWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d=&qu......
  • WPF 在ScrollViewer控件内部的Slider控件无法触摸滑动
    WPF中在ScrollViewer控件内部的Slider控件无法触摸滑动,是由于ScrollViewer控件默认设置了IsManipulationEnabled为True。<ScrollViewerx:Name="ScrollViewer1"><Slider></Slider></ScrollViewer>WPFScrollViewer的IsManipulationE......
  • vue3实现图片滚动播放
    <template> <divclass="swiperBox">  <divid="swiper">   <divclass="imgBox"@mouseenter="mouseenter"@mouseleave="mouseleave">    <av-for="(x,i)inLinkList&......
  • 视频直播系统源码,vue自定义模拟滚动条
    视频直播系统源码,vue自定义模拟滚动条vscroll自定义滚动条模板 <template> <divclass="vui__scrollbar"ref="ref__box"@mouseenter="handleMouseEnter"@mouseleave="handleMouseLeave"v-resize="handleResize">  <div:......
  • 页面滚动收起el-select下拉框
    记录当前页面select下拉框的ref(若是table列表里的则先监听table的滚动事件)<el-selectref="carrerSelect"></el-select>this.$refs.carrerSelect.handleClose()handleClose()方法是git源码//table表格里的selectthat.$refs['carrerSelect'+this.nowRowIndex]......
  • vue项目使用vue-virtual-scroll-list虚拟滚动超多千万条数据 cv可用案例
    当我们有大量数据需要显示在列表中时,传统的滚动列表会将所有数据渲染到DOM中,导致性能下降和内存占用增加。虚拟滚动列表通过仅渲染当前视窗内可见的一小部分数据,动态地根据滚动位置更新列表内容,从而实现更高效的列表渲染。vue-virtual-scroll-list是一个用于Vue.js的虚拟滚动......
  • echarts记录篇(三 ):使用横向柱状图实现左侧分类对齐右侧显示数据效果及数据过多加滚动
    一、效果如下: 二、直接上代码上一篇已经说过左侧分类,右侧数据对齐的方法,如果需要移步上篇,此篇主要是纵向滚动条功能,代码如下:dataZoom:[{type:"slider",realtime:true,//拖动时,是否实时更新系列的视图startValue:0,endVal......
  • 滚动刷新式网页的爬取方式
    fromlxmlimportetreeimportreimportrequestsimportosimporttimefromfake_useragentimportUserAgent#滚动式刷新的爬取方法base_url='https://www.pearvideo.com/'forpageinrange(1,4):new_page=(page-1)*24url=f'https://w......