【微信小程序】2 - 轮播图:swiper 、scroll-view 、flex_scroll-duration: 0.5s;支持-程序员宅基地

技术标签: 小程序  


注意:

  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; 代表:以平均的宽度 来撑满整个父级元素;中间没有缝隙,无论子元素宽度多少,都会撑满;
 */
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Eva3288/article/details/104648788

智能推荐

[OpenWrt] openwrt资料汇集_openwrt wiki打不开-程序员宅基地

文章浏览阅读1.8k次。www.openwrt.org中wiki选项竟然不开,换了IE,360浏览器都打不开,最后换了一个opera浏览器就能打开,然后发现了opera一些新的功能特征。opera开元免费,很多方面的功能都比IE,360浏览器功能强大,浏览速度很快,能够实现全文翻译。下载一个opera浏览器查看下面的文档:索引主页:http://wiki.openwrt.org/doc/techref/opkg?_openwrt wiki打不开

记录一次IDEA2020.3中Maven导入依赖失败的问题_idea2023引入maven失效-程序员宅基地

文章浏览阅读423次。IDEA2020.3中Maven导入依赖失败的问题  pom.xml已导入坐标,maven本地仓库也下载了相对应的jar包,但是在项目的libraries中却报红了,找不到对应的jar包。_idea2023引入maven失效

python集合基本操作_Python集合基本概念与相关操作实例分析-程序员宅基地

文章浏览阅读84次。本文实例讲述了Python集合基本概念与相关操作。分享给大家供大家参考,具体如下:集合的概念集合是无序可变,元素不能重复。实际上,集合底层是字典实现,集合的所有元素都是字典中的“键对象”,因此是不能重复的且唯一的。集合创建和删除使用{}创建集合对象,并使用 add()方法添加元素>>> a = {3,5,7}>>> a{3, 5, 7}>>> ..._python集合的运用abc篮球特长

贝斯曲线_你被频响曲线骗了吗?-程序员宅基地

文章浏览阅读300次。烧友们在选择耳机或者其他音频设备的时候,通常都会借鉴性的参考它们的参数。比如阻抗、灵敏度、解析力、频响范围等等,他们的表现都会影响到耳机或者其他音频设备的整体素质。那么今天说的频响曲线,跟耳机的整体素质又有什么关系呢?要了解频响曲线,首先我们要知道什么是频响。频响是频率响应的简称,英文名称是Frequency Response,一般是用来描述仪器对于不同频率信号处理能力的差异。“频”指“..._频响曲线 是贝塞斯曲线吗

苹果桌面的计算机,桌面电脑远没死:苹果又重新关注它了-程序员宅基地

文章浏览阅读105次。桌面电脑回来了?其实,从技术上来说桌面电脑从来没有离开。但是在过去十年中,我们越来越多地关注移动设备:平板电脑、智能手机甚至是笔记本电脑,而在这些设备当中,苹果又占据了很大一部分的销量。但是今年我们可以轻而易举地从苹果的 WWDC 主题演讲中获取一个信息,那就是依然有很多人喜欢台式电脑。或许在有的时候,桌面电脑是没有替代品的。完整的桌面计划苹果在 WWDC 上对关于 Mac 的话题其实并没有谈论太..._苹果桌上电脑

cs5460a c语言程序,cs5460a应用电路(含源程序)-程序员宅基地

文章浏览阅读714次。描述cs5460a应用电路CS5460A主要用于智能电度表的设计,也可用于瞬时电压电流,电压电流有效值及功率的测量。电路设计可以用单片机,也可以用自引导EPROM,运用灵活可以适应不同的需求。电压电流有效值读出的是3B 24位的无符号数,而瞬时值则是有符号24位数表示,最高位表示正负。CS5460A还提供了电能计量脉冲输出端口EOUT和功率方向端口EDIR,因而可以方便的与步进电机计数器连接构成简..._cs5460a

随便推点

spring IOC和DI源码分析_spring源码 di-程序员宅基地

文章浏览阅读6.2k次,点赞22次,收藏94次。引言先看下最基本的启动 Spring 容器的例子:public static void main(String[] args) { ApplicationContext context = new ClassPathXmlApplicationContext("classpath:applicationfile.xml");}以上代码就可以利用配置文件来启动一个 Spring 容器了,请..._spring源码 di

python-机器学习打卡(四)--监督学习(三)--决策树、决策树集成_第三方库有哪些数据集可以做决策树-程序员宅基地

文章浏览阅读403次。目录决策树控制决策树复杂度分析决策树特征重要性决策树优缺点决策树集成随机森林构造随机森林分析数据优缺点梯度提升回归树(梯度提升机)优缺点决策树决策树就是一棵树,一颗决策树包含一个根节点、若干个内部结点和若干个叶结点;叶结点对应于决策结果,其他每个结点则对应于一个属性测试;每个结点包含的样本集合根据属性测试的结果被划分到子结点中;根结点包含样本全集,从根结点到每个叶子结点的路径对应了一个判定测试序列。本质上他是从一层一层的if/else问题中进行学习并得出结论。如下图所示,如果要区分四种动物鹰(haw_第三方库有哪些数据集可以做决策树

如何使用软件测试框架,软件测试框架或架构-程序员宅基地

文章浏览阅读271次。Squish — 基于Qt的HMI自动化测试工具目录自动化测试方案设置Squish记录测试属性验证视觉验证总结本文翻译自Squish - Test automation tool for our HMI build with Qt原文作者:Piotr Lesiecki校审:Kenny Zhang当测试工程师们听到自动化测试时,首先会想到的一定是Selenium,它是最受欢迎的web应用程序脚本测试..._测试框架怎么用

IOS 调用百度地图(SDK) 进行定位以及自定义位置弹出框(气泡)_sdk获取定位后如何再次弹出弹窗-程序员宅基地

文章浏览阅读4.3k次。集成百度地图SDK并获取当前位置和目标位置,更换大头针的样式,自定义大头针上方的气泡弹出框,配置提示本应用程序是否获取当前位置定位服务提示框_sdk获取定位后如何再次弹出弹窗

SAP WM模块常用T-code_display warehouse-程序员宅基地

文章浏览阅读457次。SAP WM模块常用T-code_display warehouse

Python Tkinter 哲学家问题可视化_哲学 可视化-程序员宅基地

文章浏览阅读681次,点赞3次,收藏17次。Python Tkinter 哲学家问题可视化学校的课设总算是告一段落,现在有时间分享一下代码和心得了。这次的文章是回应之前的雏形版代码的,这次的可是完全版哦。我们先来看一下效果吧!效果总归还行吧,代码也比较简短,只有170行。再此推荐你看我之前关于这个题目的文章,接下来我直接代码讲解了。# -*- coding:utf-8 -*-#print('资源加载中,稍等片刻……')from tkinter import *from PIL import Image,ImageTk from t_哲学 可视化