微信小程序基于slider组件动态修改标签透明度的方法示例

2024-02-17 01:02:28

本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法。分享给大家供大家参考，具体如下：

1、效果展示

2、关键代码

index.wxml

<view class="img" style="opacity:{{imgOpacity}}"></view>
<slider min="0" max="1" step="0.1" show-value value="1" bindchange="changeImgOpacity"/>

此处的opacity:{{imgOpacity}}绑定data中的imgOpacity:1，用于表示图片透明度。同时bindchange="changeImgOpacity"绑定事件处理函数changeImgOpacity用于改变图片透明度。

index.js

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

这里使用setData设置透明度imgOpacity，读者可使用console.log(e)在控制台获取影响imgOpacity改变的e.detail.value，如下图：

这里还是用了slider组件，该组件主要有以下几个属性：

3、源代码点击此处本站下载。

希望本文所述对大家微信小程序开发有所帮助。

微信小程序 slider 详解及实例代码

微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器属性名类型默认值说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
微信小程序（十）swiper组件详细介绍

Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScrollerView去实现,这个swiper封装的相对还是方便的,使用方式也相对那俩容易些. 主要属性: 属性只需要设置就行了也可以抽到js文件的data中进行数据绑定,监听使用bindchange,在js中做业务处理. wxml  <swiper indicator-dot
微信小程序 (十七)input 组件详细介绍

input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试主要属性: wxml  <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"
微信小程序（十一）icon组件详细介绍

这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml  <icon type="success" size="40"/>  <icon type="safe_success" size="40"/>  <icon type="i
微信小程序 picker-view 组件详解及简单实例

picker-view 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 嵌入页面的滚动选择器属性名类型默认值说明 value Number Array 数组中的数字依次表示 picker-view 内的 picker
微信小程序（二十一）switch组件详细介绍

switch开关组件使用主要属性: wxml  <view>switch类型开关</view> <switch type="switch" checked="true" bindchange="listenerSwitch"/>  <view>checkbox类型开关</view> <s
微信小程序 slider的简单实例

微信小程序 slider的简单实例实现效果图: 微信小程序slider应用,可加减的slider控制 <view class="control-w "> <block wx:for="{{controls}}" wx:key="id" wx:for-item="v"> <view class="slide-item"> <view class="item
微信小程序（十二）text组件详细介绍

通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件</text> </view> <text>{{text}}</text> js Page({ /** * 初始化数据 */ data:{ text:"我是在js文件中绑定的文本" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来
微信小程序 picker 组件详解及简单实例

微信小程序picker 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序picker 滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器普通选择器:mode=
微信小程序（二十）slider组件详细介绍

slider滑动组件用的不太多,在其他平台反正我是用的不多主要属性: wxml <slider max="100" step="10" show-value="true" bindchange="listenerSlider" /> js Page({ data:{ // text:"这是一个页面" }, /** * 监听slider */ listenerSlider:function(e)
微信小程序（八）View组件详细介绍

刚看到这个效果的时候还真是和ReactNative的效果一致,属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单. 主要属性: flex-direction: 主要两个特性"row"横向排列"column"纵向排列 justify-content 主轴的对齐方式(如果flex-direction为row则主轴就是水平方向) 可选属性 ('flex-start', 'flex-end', 'center', 'space-between', 'spa

微信小程序基于slider组件动态修改标签透明度的方法示例

相关推荐

随机推荐