微信小程序> 微信小程序——slider组件

微信小程序——slider组件

浏览量:524 时间: 来源:Kinggitte

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}};"//viewview class="section"  view调整图标大小:/view  slider show-value max="100" min="10" step="5" value="{{icon.size}}" bindchange="changeSize"/slider/viewview class="section"  view调整透明度:/view  slider show-value max="10" min="0" step="1" value="{{icon.opacity}}" bindchange="changeOpacity"/slider/view
在wxss文件中,设置好section和section.icon-wrapper来确定格式

a.wxss

.section{padding: 10px}.section.icon-wrapper{height: 100px; font-size: 12px;}





版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎