WeUI for 小程序slider滑块

2018年09月17日 09:06 | 84次浏览 作者原创 版权保护

本章节介绍微信小程序weui实现滑块功能。

一、在pages目录中新建目录slider以及文件slider.wxml,并添加如下代码

<view class="page">
<view class="page__hd">
<view class="page__title">Slider</view>
<view class="page__desc">滑块,这里采用小程序原生的slider。</view>
</view>

<view class="page__bd page__bd_spacing">
<slider/>
<slider show-value value="50"/>
</view>
</view>

如上述代码第9行,滑块默认值为50


二、在根目录app.json配置文件中配置slider文件路径,保存后会自动生成对应的js等文件

"pages/slider/slider",



三、页面效果

如图所示,我们在页面代码中设置的进度50已经显示出来了,然后拖动鼠标,滑块的进度也随着改变。


四、上述两个滑块的css间隔样式代码如下(slider.wxss文件中添加)

slider{
margin-bottom: 30px;
}


此文章本站原创,地址 https://www.vxzsk.com/1891.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程