微信小程序使用slider组件动态修改图片的透明度

这是微信小程序使用slider组件的一个简单示例。它功能为使用slider动态修改图片的透明度。

示例代码如下:

index.wxml

<image src='./img/timg.jpg' style="opacity:{{imgOpacity}}"></image>
<slider min="0" max="1" step="0.1" show-value value="1" bindchange="changeImgOpacity"/>

视图里使用了image标签,并使用style opacity对图片设置不同的透明度,imgOpacity有pageData里的值决定

index.js

var pageData={}
pageData.data={
    imgOpacity:1
}
pageData['changeImgOpacity']=function(e){
    this.setData({
        imgOpacity:e.detail.value
    })
}
Page(pageData)

slider组件绑定了行数changeImgOpacity,它会动态修改imgOpacity的属性,从而达到动态修改图片透明度的效果。

如图:

版权声明:著作权归作者所有。

相关推荐

Html对加载失败的图片使用默认图片替换

在img标签使用onerror监听图片的加载,如果出现错误:1、设置onerror=null,这是为了避免default.png也加载失败2、把图片的src属性设置为默认图片的url,加载默认图片替换。<img src="myimg.png" onError="this.onerror=null;this.src='default.png';&quo

微信小程序页面跳转的几种方法

本文总结了微信小程序页面跳转分为这几种类型:navigate:跳转页面,并保留当前页面。前一个页面可以使用navigateBack类型的跳转退回。redirect:关闭当前页面,然后跳转到新页面。switchTab:跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。navigateBack:页面退回。微信原生提供的APInavigateTowx

Android使用Fresco加载图片的用法

在Android的App开发中,延时加载图片是硬需求。有好几个开源的项目也提供了延时加载图片的功能,常用的有:Fresco,Glide和Universal Image Loader。这里主要简单介绍下Fresco。添加依赖在build.gradle添加依赖如下:dependencies {   ...    compi