【微信小程序】实现开关灯

最新推荐文章于 2024-04-23 10:03:26 发布

夹心776655

最新推荐文章于 2024-04-23 10:03:26 发布

阅读量3.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小程序和uniapp 文章标签：小程序

本文链接：https://blog.csdn.net/qq_37086980/article/details/114300404

小程序和uniapp 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用微信小程序实现的灯控交互界面案例。通过三目运算符改变灯的状态（开/关），并利用wxml、wxss和js文件完成页面布局及功能实现。点击图片即可切换灯的状态。

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

在这里插入图片描述
light.wxml

<!--pages/light/light.wxml-->
<view wx:for="{{cons}}" class="light">
  <image
src ="{{item.src}}"
mode="aspectFill"
bindtap = "changeColor"
data-name = "{{index}}"> 
</image>
<h4>
{{item.isOn}}
</h4>
</view>

light.wxss

/* pages/light/light.wxss */
.light image{
  width: 100rpx;
  height: 100rpx;
  margin-right: 50rpx;
  display: block;
}
.light{
  float: left;
}
h4 {
  padding-left:15rpx;
}

light.js

重要：三目运算符

// pages/light/light.js
Page({
  
  /**
   * Page initial data
   */
  data: {
    // imgUrl: "../../imgs/bulb.png"
    cons: [
      {isOn: "off", src:"../../imgs/bulb.png"},
      {isOn: "off", src:"../../imgs/bulb.png"},
      {isOn: "off", src:"../../imgs/bulb.png"}
    ]

  },

  changeColor(e){
    // 获取索引值
    // console.log(e.currentTarget.dataset.name)
    let index = e.currentTarget.dataset.name

    this.data.cons[index].src = this.data.cons[index].src == "../../imgs/bulb.png"?"../../imgs/bulbSel.png":"../../imgs/bulb.png"

    this.data.cons[index].isOn = this.data.cons[index].isOn == "on"?"off":"on"

    this.setData({
      cons: this.data.cons
    })
  },

  /**
   * Lifecycle function--Called when page load
   */
  onLoad: function (options) {

  },

  /**
   * Lifecycle function--Called when page is initially rendered
   */
  onReady: function () {

  },

  /**
   * Lifecycle function--Called when page show
   */
  onShow: function () {

  },

  /**
   * Lifecycle function--Called when page hide
   */
  onHide: function () {

  },

  /**
   * Lifecycle function--Called when page unload
   */
  onUnload: function () {

  },

  /**
   * Page event handler function--Called when user drop down
   */
  onPullDownRefresh: function () {

  },

  /**
   * Called when page reach bottom
   */
  onReachBottom: function () {

  },

  /**
   * Called when user click on the top right corner to share
   */
  onShareAppMessage: function () {

  }
})