小程序之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"
})
} })
效果图:
点击刷新后 变成
待补:多次点击“ 点击刷新 ”,能跳转出多张图片。
小程序之Button组件,函数的调用与简单的逻辑的更多相关文章
- 小程序 去掉 <button /> 组件默认 border 边框样式
代码: <button class="btn">点击</button> 效果图: 目的:去掉 <button /> 默认样式中的 backgro ...
- 微信小程序之自定义组件的应用
小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 小程序解决方案 Westore - 组件、纯组件、插件开发
数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...
- 支付宝小程序日期选择组件datePicker封装
github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS ...
- 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 微信小程序中的组件
前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官 ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
随机推荐
- IDEA2018.3.5Tomcat output 中文乱码 修改配置文件生效的解决办法
首先,我也是尝试别人介绍的方法: IDEA Windows 环境 console 乱码问题 - intellij idea 15 控制台输出中文乱码问题解决办法 - liuhai的博客 - CSDN博 ...
- expect实现配置机器信任关系
利用expect的交互功能,自动配置信任机器之间的信任关系. 代码里会判断机器是否生成了秘钥,如果没有生成过,则自动帮助你执行 ssh-keygen #!/bin/sh expect_ssh_copy ...
- GraphicsLab Project学习项目
作者:i_dovelemon 日期:2016 / 05 / 30 主题:3D,Graphics 引言 进公司以来,主要在学习的就是如何保证代码的质量,以前热爱的图形学也放置了.但是,作为游戏程序员,特 ...
- Luogu2261[CQOI2007]余数求和 【数论】By cellur925
题目传送门 省选题竟然送了这么多分,60分直接暴力算就行.(算了,07年的省选) 数学题嘛,通常我们需要把式子展开,然后寻找一些性质化简=w=. 展开式以及寻找规律的过程lyd老师讲的很清楚T_T,放 ...
- 限制属性绑定(__slots__)
正常情况下,当定义了一个class并创建实例后,可以给该实例绑定任何属性和方法,这就是动态语言的灵活性 属性和方法是可以直接定义在class中的,但动态绑定允许在程序运行的过程中动态给class加上属 ...
- macOS 将【允许从以下位置下载的应用】设置为:任意来源
用管理员帐号进入Terminal: 1) 输入:sudo spctl --master-disable ,回车: 2) 重新进入该设置页面即可看到已生效:
- ssh配置详解及公私钥批量分发
第一:ssh配置文件详解 第二:ssh公私密钥的生成 第三:ssh公钥分发之一:ssh自带工具ssh-copy-id工具分发 第四:ssh公钥分发之二:编写sshpass脚本批量分发 第五:ssh公钥 ...
- Calculation 2 HDU - 3501
https://vjudge.net/problem/HDU-3501 不会做啊...记一下做法 做法是计算小于n且与n互质的数的和:根据如果gcd(i,n)==1,那么gcd(n-i,n)==1,对 ...
- canvas绘图出现模糊,解决方法
在项目开发中发现,canvas有一个问题,绘制的图会出现模糊现象. 解决方法之一:将canvas元素放大2倍,然后将整个canvas元素或者其父元素缩小两倍. <!DOCTYPE html> ...
- hash系列集合的性能优化
hash系列的集合: HashSet.LinkedHashSet 采用hash算法决定元素在集合中的存储位置 HashMap.LinkedHashMap.Hashtable 采用hash算 ...