我所接触到的Slider滑块应用的场景,主要有图片的放大缩小,调节声音的大小。不知道小伙伴们的应用场景都有哪些呢?欢迎在文章下方留言讨论哈。

  准备工作:

  创建一个页面: Slider.vue在router.js里配置 Slider页面的路由

  {

  path: '/slider',

  name: 'slider',

  component: ()=> import('./views/Slider.vue')

  }

  在index.vue里添加一项

  

  

  

  

Slider 滑块

  

  

  至今为止呢,我们的首页显示的样式子是这样滴?不知道不觉间我们已经学完了25个组件了!哇噢,为自己欢呼一下吧!如果想看更多的内容,欢迎关注我,每天都有更新哈。

  

vue2组件系列第二十九节:Slider 滑块

  代码演示Slider滑块

  基础方法:

  

  v-model="value"

  @change="onChange"

  />

  data() {

  return {

  value: 30,

  }

  },

  methods: {

  onChange(value) {

  console.log(value)

  },

  }

  van-slider的值与数据结构里的value进行双向数据绑定。惟一一个事件就是change事件,当我们在滑动滑块的时候,就会触发change事件,当然change事件里会有个value值,这个value值即为当前的进度。在开发过程不中,我们可以将这个值得出来后,利用ajax请求,将这个值传给后端让他们做处理。

  

vue2组件系列第二十九节:Slider 滑块

  指定选择范围:

  van-slider的取值范围是0-100 。有时候我们的需求呢取值范围并不是从0到100,而是从中间一个位置到指定一个位置结束,这时候怎么办?只需要设置一下其max和min值就可以,如下:

  

  v-model="value"

  :min="50"

  :max="80"

  @change="onChange"

  />

  

vue2组件系列第二十九节:Slider 滑块

  

vue2组件系列第二十九节:Slider 滑块

  这两张图分别显示了可滑动的范围,从初始位置到终点位置。

  指定步长及自定义滑块的高度:

  通常根据项目的需要,会设定不一样的步长值以及不一样的高度,可以这样定义一下:

  

  v-model="value"

  :step="20"

  bar-height="6px"

  @change="onChange"

  />

  :step: 这样每次滑动只能滑动20

  bar-height: 设置滑块的高度。这里是以px为计量单位的。

  这个组件的应用就是这么简单。组件虽然简单,最重要的还是在项目中如何去应用它,当我们遇到类似的应用时,我们应该即时想起这个组件,以及是否是这个组件的变形。

  好啦,我们又学会一个组件了!鼓掌吧!我们的开发效率又提高了一点点呢。每天积累一点点,一年后会发现收获满满。期待听到大家的成果噢!

  今天就到这里啦。休息休息一会儿吧?明天继续加油噢!加油

Logo

前往低代码交流专区

更多推荐