发布时间:2024-05-17 14:01
---------swiper属性:------------
autoplay:自行轮播
interval:自动切换的时间间隔,单位毫秒,1000毫秒 = 1秒,微信默认值是5秒
duration:滑动动画时长,默认500毫秒(0.5s)–也就是从一张图切换到另一张图,用时0.5s
注意:interval=“3000” duration=“3000” 如果写的时候
这样就是:每个3s切换一次,每次切换用3s时间,效果就是,图不会停,一直滑动indicator-dots: 轮播图下方小圆点,告知有几个图片,但是不能点击这个点, indicator是标志,指示信号的意思;
indicator-color: 轮播图指示点的颜色
current:页面刷新的时候,轮播图都是按照顺序123依次从头开始展示的,如果我们希望刷新打开先显示第2张,就用这个属性- current = 1( 值是数组索引)值
vertical:轮播图垂直方法滑动,默认是水平滑动的;如果要设这个值,必须要设置高度才会生效: style=‘height:300rpx;’ vertical
---------- swiper事件----------bindchange:当current改变时触发这个事件(自动播放 或者点击切换都触发)
<view>
<swiper autoplay interval="3000" duration="1000" indicator-dots current="1" bindchange="changeCurrent" style='height:300rpx;' vertical>
<swiper-item>
<image src='https://img11.360buyimg.com/babel/s960x370_jfs/t1/83539/14/13790/245810/5db2e06cEab8e5bd0/b76b8c8927f4aa99.jpg!cc_960x370'>image>
swiper-item>
<swiper-item>
<image src='https://img12.360buyimg.com/babel/s960x370_jfs/t1/49223/37/16144/136617/5dce7e6fE7dd6138e/d91e1085058aef5f.jpg!cc_960x370'>image>
swiper-item>
<swiper-item>
<image src='https://img13.360buyimg.com/babel/s960x370_jfs/t1/88382/27/10925/192045/5e240fc8E671f49ac/5c93000e0e62434d.jpg!cc_960x370'>image>
swiper-item>
swiper>
view>
scroll-view可以在部分区域内的左右和上下滑动区块(可滚动视图区域)
scroll-view 和 swiper类似:
- 只是swiper滑动的里面的项swiper-item,
- 而scroll-view滑动的是区块,里面没有一项一项的区分开
总结:所以如果内容是一张张图片,类似轮播用swiper; 如果是很长的view(div) 或者很长的文本用scroll-view
<view>
<scroll-view scroll-x>
<view class="nav">
<navigator url=''>国内新闻navigator>
<navigator url=''>国际新闻navigator>
<navigator url=''>社会新闻navigator>
<navigator url=''>娱乐新闻navigator>
<navigator url=''>国际新闻navigator>
<navigator url=''>社会新闻navigator>
<navigator url=''>娱乐新闻navigator>
view>
scroll-view>
view>
<view class="news">
<image src='/images/2.jpg'>image>
<view class="newsRight">
<view class="title">新人9.9view>
<text>爆款任你挑,你好河北,你好中国,你好亚洲,你好世界text>
view>
view>
--------应用swiper--------
<swiper autoplay>
<swiper-item>
<view class="news">
<image src='/images/2.jpg'>image>
<view class="newsRight">
<view class="title">新人9.9view>
<text>爆款任你挑,你好河北,你好中国,你好亚洲,你好世界text>
view>
view>
swiper-item>
<swiper-item>
<view class="news">
<image src='/images/2.jpg'>image>
<view class="newsRight">
<view class="title">新人9.9view>
<text>爆款任你挑,你好河北,你好中国,你好亚洲,你好世界text>
view>
view>
swiper-item>
<swiper-item>
<view class="news">
<image src='/images/2.jpg'>image>
<view class="newsRight">
<view class="title">新人9.9view>
<text>爆款任你挑,你好河北,你好中国,你好亚洲,你好世界text>
view>
view>
swiper-item>
swiper>
--------应用scroll-view--------
<scroll-view scroll-x>
<view style="display:flex;">
<view class="news">
<image src='/images/2.jpg'>image>
<view class="newsRight">
<view class="title">新人9.9view>
<text>爆款任你挑,你好河北,你好中国,你好亚洲,你好世界text>
view>
view>
<view class="news">
<image src='/images/2.jpg'>image>
<view class="newsRight">
<view class="title">新人9.9view>
<text>爆款任你挑,你好河北,你好中国,你好亚洲,你好世界text>
view>
view>
<view class="news">
<image src='/images/2.jpg'>image>
<view class="newsRight">
<view class="title">新人9.9view>
<text>爆款任你挑,你好河北,你好中国,你好亚洲,你好世界text>
view>
view>
view>
scroll-view>
布局模型有两种:
display: flex; 代表的是可以让你在某一行内完成几个单独区块的创建,相互之间没有关联(都写在父级元素上)
父级做了display: flex; 设置,子元素flex:1;每一个子元素均分宽度占满父级;
或者
父级做了display: flex; 设置,子元素flex:0 0 80px;
flex用来设置子元素的固定大小,复合属性,参数一-子元素扩展比例,参数二 - 子元素收缩比例,参数三- 子元素大小,这样写了具体的尺寸;
使用方式1:
display: flex;
布局为弹性布局,加在父元素上;flex-direction:row/column;
主轴方向; 弹性布局的方向(弹性容器的方向),默认是row 横向;justify-content:flex-start / flex-end / center /spacebetween / space-around
主轴上的对齐方式,justify 是对齐的意思flex-wrap:wrap;
换行; 一行放不下的时候自动换行,如果没有加这个属性,会都挤在一行里align-items:flex-start
上对齐/flex-end 下对齐/center上下居中/stretch;交叉轴线上的对齐方式;上中下<view class='outer-view'>
<view class="inner-view">11view>
<view class="inner-view">22view>
<view class="inner-view">33view>
<view class="inner-view">44view>
<view class="inner-view">55view>
<view class="inner-view">66view>
<view class="inner-view">77view>
<view class="inner-view">88view>
view>
.outer-view{
background: #f0f0f0;
/* height:400rpx; */
display: flex;
flex-direction:row;
justify-content:space-around;
flex-wrap:wrap;
align-items:flex-start;
/*
7. display: flex; 布局为弹性布局,加在父元素上;
8. flex-direction:row/column; 主轴方向; 弹性布局的方向(弹性容器的方向),默认是row 横向;
row 的主轴方向是从左start向右end; column 的主轴方向是从上start到 下end
9. justify-content:flex-start / flex-end / center /spacebetween / space-around 主轴上的对齐方式,justify 是对齐的意思
弹性项目 在 主轴main-axis 线上的对齐方式,假如主轴方向是从左到右:flex-direction:row; 那么主轴是左中右,交叉轴是上中下:
flex-start左对齐 / flex-end右对齐 / center左右居中 /spacebetween左右两端对齐 / space-around 平均平分对齐
10. flex-wrap:wrap; 换行; 一行放不下的时候自动换行,如果没有加这个属性,会都挤在一行里
-----------交叉轴 cross-axis----------
11. align-items:flex-start 上对齐/flex-end 下对齐/center上下居中/stretch;交叉轴线上的对齐方式;上中下
*/
}
.inner-view{
background: green;
height:160rpx;
line-height:160rpx;
width:160rpx;
text-align: center;
margin-top:30rpx;
}
使用方式2:
flex:1;
–在子元素中 flex:1; 代表:以平均的宽度 来撑满整个父级元素;中间没有缝隙,==无论子元素宽度多少,都会撑满flex:0 0 80px;
代表不扩展 也不收缩,具体尺寸就是80px;<view class="outer">
<view class="inner">1view>
<view class="inner">2view>
<view class="inner">3view>
<view class="inner">4view>
view>
.outer{
background: #f0f0f0;
display: flex;
/* 还是在父元素里布局设为flex */
}
.inner{
background: yellowgreen;
width:120rpx;
/*flex:0 0 120px; 这样写就相当与给了宽度,这样不一定会撑满*/
height:120rpx;
line-height:120rpx;
border-right:1px solid green;
text-align: center;
flex:1;
/*
1. flex:1; --在子元素中 flex:1; 代表:以平均的宽度 来撑满整个父级元素;中间没有缝隙,无论子元素宽度多少,都会撑满;
*/
}