实训day 03：微信小程序项目结构分析

最新推荐文章于 2024-10-14 15:48:18 发布

原创最新推荐文章于 2024-10-14 15:48:18 发布 · 226 阅读

CC 4.0 BY-SA版权

博客介绍了微信小程序开发相关内容。在图片轮播方面，使用<block wx:for>遍历movies[]数组，<swiper-item>作为item；数据绑定会转到js文件中的数据，flag属性类型为blood，可保存为true和!true，还可引入点击事件联动数据绑定，点击时改变flag，js代码也需相应修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片轮播：

1.index.wxml

<!--index.wxml-->    
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">    
      <block wx:for="{{movies}}" wx:for-index="index">    
        <swiper-item>    
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>    
        </swiper-item>    
      </block>    
    </swiper>

微信小程序开发的循环用到了<block wx:for >，这里是遍历movies[]数组.<swiper-item>就是item

数据绑定：

<image src='../../assets/icons/position2.png' style='width:50px;height:50px;' wx:if="{{flag}}"></image>
<image src='../../assets/icons/my.png' style='width:50px;height:50px;' wx:if="{{!flag}}"></image>

数据绑定会转到js文件中的数据，而flag的属性类型是blood，他可以在数据中保存为true和!true

这时候就可以引入一个点击事件，来联动具象化数据绑定。当点击一次就改变一次flag

<button bindtap='click'>点击</button>

而js文件的代码相应做以下修改：

data: {
    msg: "Home",
    id: "txt",
    index: "5",
    imgurl: [{
      url: "../../images/b3.jpg"
    }, {
      url: "../../images/b2.jpg"
    }, {
      url: "../../images/b1.jpg"
    }, {
      url: "../../images/b1.jpg"
    }, {
      url: "../../images/b2.jpg"
    }, {
      url: "../../images/b3.jpg"
    }, {
      url: "../../images/b1.jpg"
    }],
    flag: false,
    obj: {
      name: "惠普",
      index: "0",
      time: "18"
    }
  },
  click: function () {
    console.log(this.data.flag);

   // 更改data属性
    // this.setdata(object)
    this.setData({
      flag: !this.data.flag
    })
  },