我们要实现一个简单的功能,在界面上放置一张图片,设置重新加载按钮,能更新图片。

   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"
})
} })

   效果图:

      点击刷新后   变成

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

   

小程序之Button组件,函数的调用与简单的逻辑的更多相关文章

  1. 小程序 去掉 <button /> 组件默认 border 边框样式

    代码: <button class="btn">点击</button> 效果图: 目的:去掉 <button /> 默认样式中的 backgro ...

  2. 微信小程序之自定义组件的应用

    小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...

  3. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  4. 小程序解决方案 Westore - 组件、纯组件、插件开发

    数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...

  5. 支付宝小程序日期选择组件datePicker封装

    github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...

  6. 微信小程序--页面与组件之间如何进行信息传递和函数调用

    微信小程序--页面与组件之间如何进行信息传递和函数调用 ​ 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...

  7. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  8. 微信小程序中的组件

    前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官 ...

  9. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

随机推荐

  1. E20180412-hm

    overflow  vt. 溢出,淹没; 挤满,充满; 洋溢; 资源过剩;   n. 泛滥,溢出物; 溢流管; 充溢,过多; 超出额;   vi. 泛滥,溢出; 充溢;

  2. git 命令参考手册

    你的本地仓库由 git 维护的三棵“树”组成.第一个是你的 工作目录,它持有实际文件:第二个是 缓存区(Index),它像个缓存区域,临时保存你的改动:最后是 HEAD,指向你最近一次提交后的结果. ...

  3. IT兄弟连 JavaWeb教程 转发和重定向的区别

    转发是在服务器端完成的:而重定向是在客户端完成的. 转发的速度快:而重定向的速度慢. 转发的是同一次请求:而重定向是两次不同的请求. 转发不会执行转发后的代码:而重定向会执行重定向后的代码. 转发地址 ...

  4. YCOJ黑熊过河

    Description 有一只黑熊想过河,但河很宽,黑熊不会游泳,只能借助河面上的石墩跳过去,他可以一次跳一墩,也可以一次跳两墩,但是每起跳一次都会耗费一定的能量,黑熊最终可能因能量不够而掉入水中,所 ...

  5. robotframework自动化系列:登陆操作

    robotframework自动化系统:登录 robotframework对于编程能力比较弱的测试人员而言,真的是雪中送炭!我们可以使用robotframework根据之前完成的测试用例,一步步完善自 ...

  6. Hibernate中的Query对象查询所有记录

    映射文件,核心文件,实体类,工具类的内容都不变直接看测试方法中的代码: package com.yinfu.test; import java.util.List; import org.hibern ...

  7. C#中自定义类数组和结构数组的使用

    如有雷同,不胜荣幸,若转载,请注明 C#中自定义类数组和结构数组的使用 最近在很多项目中发现很多时候给定的数组要实现某个逻辑或处理很是麻烦,一维数组,二维数组,,,等等需要经过n多转换,还不如自己写一 ...

  8. iOS 获取当前响应链的First Responder (Swift)

    import UIKit private weak var currentFirstResponder: AnyObject? extension UIResponder { static func ...

  9. C++构造函数与析构函数的解析

    创建一个对象时,常常需要作某些初始化的工作,例如对数据成员赋初值. 注意,类的数据成员是不能在声明类时初始化的.如果一个类中所有的成员都是公用的,则可以在定义对象时对数据成员进行初始化.如: clas ...

  10. 跟我一起玩Win32开发(20):浏览文件夹

    最近忙于一些相当无聊的事情,还没忙完,不过,博客还是要写的,不然我头顶上会多了几块砖头. 在上一篇博文中,我们浏览了文件,今天我们也浏览一下目录,如何? 浏览目录我们同样有两个规矩,用托管类库的我就不 ...