小程序之Button組件,函數的調用與簡單的邏輯


我們要實現一個簡單的功能,在界面上放置一張圖片,設置重新加載按鈕,能更新圖片。

   WXML代碼:

<!--index.wxml-->
<view clas="index" style="background: white">
  <image class='imagetest' src="{{imageUrl}}" mode="aspectFill"></image>
  <button bindtap="change">點擊刷新</button>
</view>

   JS代碼:

//index.js
const app = getApp()

Page({
  data: {
    imageUrl: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1548078773863&di=926baa6630a9b7c434a949636bb8d0c0&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f5585b35aa86a80120b959631921.jpg%403000w_1l_2o_100sh.jpg",
  },

  change: function (event) {
    var that = this;
    this.setData({
      imageUrl:     "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1988014297,2570740281&fm=26&gp=0.jpg"
    })
  }

})

   效果圖:

      點擊刷新后   變成

待補:多次點擊“ 點擊刷新 ”,能跳轉出多張圖片。

 

 

   


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM