微信小程序——slider组件

最新推荐文章于 2024-08-16 07:55:26 发布

Kinggitte

最新推荐文章于 2024-08-16 07:55:26 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/wqwweerrtyy/article/details/79077251

版权

本文介绍了微信小程序中的slider组件，强调了其作为滑动选择器在用户体验上的优势。通过示例代码展示了如何在a.js、a.wxml和a.wxss中配置和调整slider组件的Size和Opacity属性。

摘要由CSDN通过智能技术生成

slider组件是通常我们讲的滑动选择器，通常情况下，手机操作滑动选择器远比直接进行数值输入的好。

以下是代码

a.js

changeSize:function(e){
  this.data.icon.size = e.detail.value;
  this.setData(this.data);
},
changeOpacity:function(e){
  this.data.icon.opacity = e.detail.value;
  this.setData(this.data);
}

这段是直接放到Page里的，可以调整Size和Opacity，这两个数据是直接放到data段中，所以可以设置初值。代码如下：

data: {
  icon: {
    size: 20,
    opacity: 8
  }}

至于wxml中，只需定义并设置好方便调整就好

a.wxml

<view class="section icon-wrapper">
  <icon type="success" size="{
  {icon.size}}" style="opacity:{
  {icon.opacity/10}};"/>
</view>
<view class="section">
  <view>调整图标大小：</view>
  <slider show-value max="1