1
收藏
评论

两种渲染与数据绑定+swiper组件

数据绑定,两种渲染,和swiper组件,来玩啊

前言

关于这一篇为什么换标题了?其实这一篇还是我的入门教程系列文章,因为涉及的东西有点多不好起名字,所以我暂时改一个标题😝,这一篇讲的是小程序的数据绑定,和两种特殊的渲染以及<swiper>组件,这一篇讲的东西可以说是很重要了,特别是数据绑定。它可以帮我们将从后台得到的数据绑定到你要展示的位置,所以这些学好,又离我们写一个好的小程序的小目标近了一步,ok,学起来。

数据绑定

数据绑定是很好理解的,通俗一点就是,我想动态的在这展示我的数据,那么我就在这用一个标记把这里标记起来,然后我通过这个标记把数据放过来。没错就是这么简单,语法也简单,就是用两个大括号将变量包裹起来,像这样<view>{{ message }}</view>,这样就声明了这需要一个叫message的数据,那这个数据哪里来?这和 js 中的data有关,可以说这里是我们定义数据的地方,在这可以给标记赋值,然后当页面启动的时候,框架就会知道将data中的数据方法对应的标记位置。当我们想在一个函数中动态传一些数据的话,就是可以使用**this.setData({ })**方法来实现,数据绑定还有很多的玩法建议看文档。下面举一个简单的例子

wxml代码

<view>你好!!</view>
<view>{{value}}</view>

js代码

Page({
  data: {
    value:"你好小程序"
  }
})

效果图

条件渲染

wx:if 是小程序的一个控制渲染的属性,也就是符合条件的才会渲染,而不符合条件的就不渲染,它的用法就是<view wx:if="{{condition}}"></view>,判断的条件要写在双引号里面,可以是静态的值,也可以是数据绑定的动态值,也可以是带有判断运算符的值,因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。(<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。引文档)它还有两个兄弟wx:elif 和 wx:else ,这和一些语言的 if 三件套使用是很接近的,意思是一样的,那就不多说了,总之符合条件才会渲染。

wxml代码

<!--代码来自文档-->
<view wx:if="{{condition}}">True</view>

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

js代码

Page({
  data: {
    condition:true
  }
})

效果图

列表渲染

wx:for 是一个很实用的属性,举个例子,在web页面里面你想要展示三个大小一样的盒子,是不是要复制两次代码,有了wx:for就不用这么麻烦了,直接在view上加上这个属性,循环3次框架就会渲染出三个一样的view,在组件上使用 wx:for 控制属性绑定一个数组(也可以是数值),即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
如果你不想用默认的,你可以使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名,wx:for的例子就不举了,文档关于这块写的很好

这里提一下为什么要把swiper组件连在一起讲呢!在swiper组件中会用到这些内容,所以既可以当作练习以上内容,顺便也就把swiper学了

swiper组件

讲真,小程序的组件真的是很方便,如果要是在web端实现一个轮播图那是要费点力气啊!但是通过<swiper>和<swiper-item>(注:swiper-item只能在swiper里面使用)的配合,再加上<swiper>组件的一些属性,轻松就能生成一个漂亮美观的轮播图。当你需要自动滚动的时候只需要设置autoplay为true就行,要设置滚动时间的话只需要使用interva属性就行,lindicator-dots可以控制要不要面板指示点。属性比较多,所以建议看文档

wxml代码

<!--我这没有设置滚动时间,默认5秒-->
<swiper class="swiper_" autoplay='true' indicator-dots="true" indicator-active-color='orange'>
  <swiper-item wx:for="{{imgUrls}}" wx:key>
    <image src='{{item}}'></image>
  </swiper-item>
</swiper>

js代码

Page({
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ]
  }
})

效果图

结语

谢谢大家的支持!

最后一次编辑于  08-04  (未经腾讯允许,不得转载)
复制链接赞 1收藏投诉评论

6 个评论

  • 7 Yesrs
    7 Yesrs
    03-25

    想请教一下,我在js下添加images的.jpg图片,却无法显示。但仍能够运行轮播效果。

    03-25
    赞同
    回复 5
    • Killer Irving
      Killer Irving
      03-25

      有截图吗?你贴图和代码看看呢,有可能是你的图片路径不对,无法显示

      03-25
      回复
    • 7 Yesrs
      7 Yesrs
      03-25回复Killer Irving




      03-25
      回复
    • 7 Yesrs
      7 Yesrs
      03-25回复Killer Irving

      就是这样的

      03-25
      回复
    • Killer Irving
      Killer Irving
      03-25回复7 Yesrs

      这明显路径问题,改成 /images/...jpg试试

      03-25
      1
      回复
    • 外星间谍
      外星间谍
      03-30回复7 Yesrs

      image的src应该是'{{item}}'吧,也不太确定是否支持相对路径

      03-30
      1
      回复