微信小程序> 小程序自定slider,如何把小圆圈换成图片。值得一试。

小程序自定slider,如何把小圆圈换成图片。值得一试。

浏览量:1368 时间: 来源:小白之路!

项目需求要是有slider,小程序的slider那个小圆圈是不能更换成图片的,所有满足不了项目需求,网上相关的例子太少,寻思了很久,决定还是自己写了一个。。
先上效果:我把小圆圈换成了图片,还是很不错的
简单的实现:图片很不错
小程序
小程序
项目中实现的图片:花里胡哨,就是这么好看
小程序
小程序
小程序
直接上代码:

view    input value="{{value}}" bindinput="handleCheck" placeholder="请输入金额" type="text"    {{value}}    view        class="custom-class van-slider {{ disabled ? 'van-slider--disabled' : '' }}"        style="{{ inactiveColor ? 'background:' + inactiveColor : '' }}"        bind:tap="onClick"            view            class="van-slider__bar"            style="{{ barStyle }}; {{ activeColor ? 'background:' + activeColor : '' }}; left:{{ offsetX }} "                    view                class="van-slider__button-wrapper"                bind:touchstart="onTouchStart"                catch:touchmove="onTouchMove"                bind:touchend="onTouchEnd"                bind:touchcancel="onTouchEnd"                            view class="van-slider__button"                    image                        class="img-size"                        src="../images/trangle.png"                        mode="scaleToFill"                        lazy-load="false"                    /                    view class="van-img-box"                        view class="van-value-box" wx:if="{{!isMore}}"{{value}}/view                        view class="van-value-box" wx:if="{{isMore}}"更多/view                        !-- image src="{{}}" mode="scaleToFill"                          lazy-load="false"                        /image--                    /view                /view            /view        /view    /view/view

代码拿过去就可以使用:最好是wepy框架。我是用的wepy框架,里面有些不需要的代码,我没有去删除,就这样,太忙了。
继续前行。。。一天一点点。。

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

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