小程序之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,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
随机推荐
- 20170406-ms
Interval 间隔 revoke v撤销 alert adj 警觉的 n警报
- Android Fragment使用小结及介绍
目录(?)[-] 一什么是Fragment 二Fragment的生命周期 三Fragment的两种添加方式addreplace 四两种添加方式性能比较 偶记得第一次接触Fragment,觉得好牛叉的组 ...
- 51nod 1051 最大子矩阵和(DP)
题意 略 分析 一道经典的DP题,但是我弱到差点做不出来,真的垃圾 设置\(sum(i,j)代表1-i行第j列的前缀和\),然后枚举行i和行j,再枚举列k,做一遍类似一维的最大子段和即可 #inclu ...
- lightoj1169【DP】
题意(来自大哥): 有两栋楼,左边一栋,右边一栋,层数从1-n,地面的标号为0,每一层有一个水果.有一只猴子在地面上,他现在要上到n层去,在第i层会吃掉水果花费一定时间. 猴子有两种方式从第i层到i+ ...
- Codeforces34C【尺取】
题意: 输入一系列的数,连续数字则输出连续区间 看第一个案例就很明显 思路: 输入字符串输入,预处理一下. 写了个挫尺取- 贴一发挫code--. #include <bits/stdc++.h ...
- Codeforces731D 80-th Level Archeology
考虑将两个单词变成有序,我们可以得到一个或者两个旋转次数的区间. 然后考虑将两组单词变成有序,比如[l,mid]和[mid+1,r],对于mid和mid+1这两个单词我们可以求出使他们有序的旋转次数的 ...
- pycharm 激活码激活
http://idea.lanyus.com/ 去这个网站获取激活码,输入即可,亲测可用
- sublime text 3 文件列表忽略特定格式的文件
Preferences->Settings ,编辑相关代码,注意JSON格式: 排除特定目录,使用:"folder_exclude_patterns" 排除特定文件,使用:& ...
- (转)Unity优化之减少Drawcall
转载:http://www.jianshu.com/p/061e67308e5f Unity GUI(uGUI)使用心得与性能总结 背景和目的 小哈接触Unity3D也有一段时间了,项目组在UI解决方 ...
- #pragma使用分析
#pragma简介 #pragma用于指示编译器完成一些特定的动作 #pragma所定义的很多指示字是编译器特有的 #pragma在不同的编译器间是不可移植的 预处理器将忽略它不认识的#pragma指 ...