zoukankan      html  css  js  c++  java
  • 小程序之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"
        })
      }
    
    })

       效果图:

          点击刷新后   变成

    待补:多次点击“ 点击刷新 ”,能跳转出多张图片。

       

  • 相关阅读:
    git connection due to public key issue
    ubuntu search and java write to file
    url
    sort by datetime
    work on ui
    PHP工厂方法模式
    PHP的简单工厂模式
    php如何判断数组是一维还是多维
    nginx搭建分布式简单配置
    python的单例模式
  • 原文地址:https://www.cnblogs.com/jkzr/p/10300504.html
Copyright © 2011-2022 走看看