【微信小程序】2 - 轮播图：swiper 、scroll-view 、flex

发布时间：2024-05-17 14:01

文章目录

      • 1、swiper
      • 2、scroll-view
      • 3、flex

注意：

  1. 点击微信开发工具右上角"详情" ,查看项目信息：本地代码的大小是不能超过2兆的（2兆就是2mb（兆字节） = 2048 kb（千字节），所以我们的大图片都不存本地，我们可以弄个在线库 或者弄个图片平台
  2. 微信里一般icon图标我们存在本地，图片我们不存本地，用线上的图片；如果一张图片很大，那下载这个图片时占据的内存很大，不存在大数据加载的操作；
  3. 1px = 2rpx;
    但是这种转换不是绝对值，iphone6是1：2, rpx类似em / rem
    rpx 是微信的单位，根据不同的手机版本进行切换，微信建议我们用iphone6 作为标准调试界面

1、swiper

---------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>

2、scroll-view

scroll-view可以在部分区域内的左右和上下滑动区块（可滚动视图区域）

scroll-view 和 swiper类似：

  1. 只是swiper滑动的里面的项swiper-item，
  2. 而scroll-view滑动的是区块，里面没有一项一项的区分开

总结：所以如果内容是一张张图片，类似轮播用swiper; 如果是很长的view(div) 或者很长的文本用scroll-view

  1. 给.nav弹性盒布局，且不换行 display: flex;white-space: nowrap;
  2. 必须给scroll-view 添加属性scroll-x 才能滑动

<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>

3、flex

布局模型有两种：

  1. display: flex; 代表的是可以让你在某一行内完成几个单独区块的创建，相互之间没有关联（都写在父级元素上）

  2. 父级做了display: flex; 设置，子元素flex:1;每一个子元素均分宽度占满父级；

或者
父级做了display: flex; 设置，子元素flex:0 0 80px;
flex用来设置子元素的固定大小，复合属性，参数一-子元素扩展比例，参数二 - 子元素收缩比例，参数三- 子元素大小，这样写了具体的尺寸；

使用方式1：

  1. display: flex;布局为弹性布局,加在父元素上;
  2. flex-direction:row/column; 主轴方向; 弹性布局的方向（弹性容器的方向）,默认是row 横向；
    row 的主轴方向是从左start向右end； column 的主轴方向是从上start到 下end
  3. justify-content：flex-start / flex-end / center /spacebetween / space-around主轴上的对齐方式，justify 是对齐的意思
    弹性项目 在 主轴main-axis 线上的对齐方式，假如主轴方向是从左到右：flex-direction:row； 那么主轴是左中右，交叉轴是上中下：
    flex-start左对齐 / flex-end右对齐 / center左右居中 /spacebetween左右两端对齐 / space-around 平均平分对齐
  4. flex-wrap:wrap;换行; 一行放不下的时候自动换行，如果没有加这个属性，会都挤在一行里
    -----------交叉轴 cross-axis----------
  5. 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：

  1. flex：1;–在子元素中 flex：1; 代表：以平均的宽度 来撑满整个父级元素；中间没有缝隙，==无论子元素宽度多少，都会撑满
    ==；
  2. 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; 代表：以平均的宽度 来撑满整个父级元素；中间没有缝隙，无论子元素宽度多少，都会撑满；
 */
}

相关推荐

想进阿里必须啃透的12道MySQL面试题

表单验证ajax无刷新表单提交

bartender的安全策略不允许指定的用户执行此操作_如何以非root用户运行Docker容器...

Javascript中扁平化数据结构与JSON树形结构转换详解

【C语言】实现三子棋（详解）

android 架构师jd,在京东，做架构师是一种什么样的体验？

一图看懂 | 腾讯云原生安全“3+1”重保防护体系

Python项目案例开发从入门到实战-1.2 Python语法基础

【Verilog语法1】加载存储器$readmemh和$readmemb函数的使用

强化学习-学习笔记7 | Sarsa算法原理与推导

Linux系统编程——进程入门

OpenCV学习——基本操作之IO操作

javaScript打印等腰三角形，全网最详解(费曼学习法)

GD32F103串口DMA收发

以太坊之Windows DApp开发环境的搭建

蜘蛛纸牌（Java）课设

DNS 系列（三）：如何免受 DNS 欺骗的侵害

手撕前端面试题【javascript~模板字符串、类继承、参数解析器、生成页码等】

【教程】网络会议开启虚拟摄像头

pytorch创建自己的Dataset加载数据集

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号