图片属性--img

图片

完整代码
img是item的关键字,可以配合title生成图文信息

  {
    title: '生成图片',
    img: 'http://www.agzgz.com/abc.jpg'
  }

img关键字

img关键字支持数据类型{String/Object/Aarray},每种数据类型对应生成不同的img结构

String类型

string类型直接生成<img>标签的图片结构

  Pager({
      data: {
        motto: Pager.item({
          img: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg'
        })
      },

Object类型

这一类型允许指定图片的相关属性,如class, style, aim等属性

  Pager({
      data: {
        motto: Pager.item({
          img: {
            src: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg',
            itemClass: 'myimg',
            itemStyle: 'width: 100px; height: 100px',
            aim: 'some-action-fun'
          }
        })
      },

Array类型

Object类型图片的数组集合,用于生成一组图片

  Pager({
      data: {
        motto: Pager.item({
          img: [
            { src: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg' },
            { src: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg' },
            { src: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg' }
          ]
        })
      },

示例

  • item结构
  • ITEM的组成结构

    • 代码部分
      Pager({
        data: {
          motto: Pager.item({......})
        },
        onLoad: function(){
          picsData = {
            title: {title: '一组图片', class: 'h2', style: 'margin: 0 0 50rpx 0; display: block;'},
            img: [
              { src: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg', aim: 'x', style: 'width: 80vw; display: block; margin-top: 1vh;'},
              { src: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg', aim: 'x', style: 'width: 60vw; display: block; margin-top: 1vh;'},
              { src: 'https://img13.360buyimg.com/n7/jfs/t1/3/15/4536/138660/5b997bf8Ed72ebce7/819dcf182d743897.jpg', aim: 'x', style: 'width: 40vw; display: block; margin-top: 1vh;'},
            ]
          }
          const motto = Pager.getElementsById('motto') 
          motto.reset().update(picsData)
        }
        ...
        ...
      })
      
      通过getElementsById方法获得item的实例(使用Pager.item初始化后),该实例可通过update来修改内容。 指定不同样式来展现不同的展示效果
      reset方法用来恢复item的初始数据