【微信小程序】2 - swiper 、scroll-view 、flex

其他 2020-04-18 23:35:03 阅读次数: 0

文章目录


注意：

  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 拖动的时候拖的是swiper-item 这个项 -->

 <!-- 
  -->
<swiper-item>  
  <image src='https://img11.360buyimg.com/babel/s960x370_jfs/t1/83539/14/13790/245810/5db2e06cEab8e5bd0/b76b8c8927f4aa99.jpg!cc_960x370'></image>
  <!-- 微信里图片变迁不是img  而是image -->
  <!-- 微信里一般icon图标我们存在本地，图片我们不存本地，用线上的图片；如果一张图片很大，那下载这个图片时占据的内存很大，不存在大数据加载的操作； -->
</swiper-item>
<swiper-item> 
  <!-- 1.点击图片跳转页面，html里我们是用a标签包裹图片，点击图片其实是对a标签的操作，
  2. 这里类似只是把a标签<a href=''></a>换成了navigator标签<navigator url=''></navigator> ,
  3.并且链接属性名是url，属性值必须是应用内的跳转链接，在app.json的pages里注册过的页面，不能像网页一样跳百度
  4.url 路径问题：
  app.json里pages里的路径："pages/9swiper/9swiper" 是**当前目录下**的pages里的文件，app.json 和pages同级目录下
  而navigator跳转的时候："/pages/9swiper/9swiper"  前面要加/ 表示从**根路径**出发找pages文件夹
  -->
  <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>
<!-- swiper 切换的是swiper-item 和内部内容没有关系，swiper-item 内可以放文字、图片 还可以放页面 ，进行页面的切换
小程序页面的左右滑动切换页面就是这样实现的
-->
</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 才能滑动
<!-- 可拖动导航条----scroll-view -->
<view>
  <scroll-view scroll-x>
    <!-- 2. 必须给scroll-view 添加属性scroll-x 才能滑动 -->
    <view class="nav">
      <!-- 1.给.nav弹性盒布局，且不换行  display: flex;white-space: nowrap;  -->
      <navigator url=''>国内新闻</navigator>
      <navigator url=''>国际新闻</navigator>
      <navigator url=''>社会新闻</navigator>
      <navigator url=''>娱乐新闻</navigator>

      <navigator url=''>国际新闻</navigator>
      <navigator url=''>社会新闻</navigator>
      <navigator url=''>娱乐新闻</navigator>
      <!-- 在导航条里面注意：点击切页面 和点击跳页面时两码事：
      点击切页面时绑定bindtap 点击事件，点击的时候利用swiper 切换里面的每一项
      点解跳页面时，用navigator标签进行页面跳转 -->
    </view>
  </scroll-view>
</view>

<!-- 新闻列表：有模块化的定义 -->
<view class="news">
  <image src='/images/2.jpg'></image>
  <view class="newsRight">
    <view class="title">新人9.9</view>
    <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.9</view>
        <text>爆款任你挑，你好河北，你好中国，你好亚洲，你好世界</text>
      </view>
    </view>
  </swiper-item>
  <swiper-item>
    <view class="news">
      <image src='/images/2.jpg'></image>
      <view class="newsRight">
        <view class="title">新人9.9</view>
        <text>爆款任你挑，你好河北，你好中国，你好亚洲，你好世界</text>
      </view>
    </view>
  </swiper-item>
  <swiper-item>
    <view class="news">
      <image src='/images/2.jpg'></image>
      <view class="newsRight">
        <view class="title">新人9.9</view>
        <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.9</view>
        <text>爆款任你挑，你好河北，你好中国，你好亚洲，你好世界</text>
      </view>
    </view>
    <view class="news">
      <image src='/images/2.jpg'></image>
      <view class="newsRight">
        <view class="title">新人9.9</view>
        <text>爆款任你挑，你好河北，你好中国，你好亚洲，你好世界</text>
      </view>
    </view>
    <view class="news">
      <image src='/images/2.jpg'></image>
      <view class="newsRight">
        <view class="title">新人9.9</view>
        <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">11</view>
  <view class="inner-view">22</view>
  <view class="inner-view">33</view>
  <view class="inner-view">44</view>

  <view class="inner-view">55</view>
  <view class="inner-view">66</view>
  <view class="inner-view">77</view>
  <view class="inner-view">88</view>
</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">1</view>
  <view class="inner">2</view>
  <view class="inner">3</view>
  <view class="inner">4</view>
</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; 代表：以平均的宽度 来撑满整个父级元素；中间没有缝隙，无论子元素宽度多少，都会撑满；
 */
}
Eva3288
发布了57 篇原创文章 · 获赞 4 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/Eva3288/article/details/104648788
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022