小程序之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,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
随机推荐
- 洛谷 - P2293 - 高精度开根 - 高精度
https://www.luogu.org/problemnew/show/P2293 要求求出给定高精度整数的非负根取整的结果. 还有神仙用Python的浮点pow运算骗到不少分的. 唉! 那么我们 ...
- 《高性能iOS 应用开发》之降低你 APP 的电量消耗
在编写高性能 代码时, 电量消耗是一个需要重点处理的重要因素, 就执行时间和 CPU 资源的利用而言, 我们不仅要实现高效的数据结构和算法, 还需要考虑其他的因素,如果某个应用是个电池黑洞,那么一定不 ...
- Bank Hacking CodeForces - 796C
题目 题意: 一条笨狗要去黑银行,银行有n个,它们之间用n-1条边连接.可以选择任意一个银行开始黑,但是后面每一次黑的银行都要求与已经黑过的银行直接相连.每个银行初始有一个防御值,每一个银行被黑后,与 ...
- `<img>`放到`<div>`中底部出现空隙 以及解放方案.
形成情况: 外部的 不设置宽高, 由内部图片撑开 撑开后, 底部会有空隙 问题原因: div元素中的行内元素的默认vertical-align对齐方式是基线baseline img是行内元素, 所以会 ...
- VS Code 自用插件备份
自用插件备份 Auto Close Tag 自动闭合标签 Atuo Rename Tag 更改前面标签的时候, 自动更改后面的闭合标签 Guides 对齐线 open-in-browser 在浏览器中 ...
- 480 Sliding Window Median 滑动窗口中位数
详见:https://leetcode.com/problems/sliding-window-median/description/ C++: class Solution { public: ve ...
- Aria's Loops
https://www.hackerrank.com/contests/101hack41/challenges/arias-loops 可以看我以前的笔记,http://www.cnblogs.co ...
- C. Arpa's loud Owf and Mehrdad's evil plan DFS + LCM
http://codeforces.com/contest/742/problem/C 首先把图建起来. 对于每个a[i],那么就在i --- a[i]建一条边,单向的. 如果有一个点的入度是0或者是 ...
- 移动端UI自动化Appium测试——Android系统下使用uiautomator viewer查找元素
在利用Appium做自动化测试时,最重要的一步就是获取对应的元素值,根据元素来对对象进行对应的操作,如何获得对象元素呢?Appium Server Console其实提供了一个界面对话框&qu ...
- P2044 随机数生成器
链接:https://www.luogu.org/problem/show?pid=2044#sub 题目描述 栋栋最近迷上了随机算法,而随机数是生成随机算法的基础.栋栋准备使用线性同余法(Linea ...