Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 96dd2448 编写于 作者: H hdx
浏览文件
操作

slider: 增加浮点例子

上级 3c7ca9e2
隐藏空白更改
内联 并排
Showing with 133 addition and 201 deletion
pages/component/slider/slider.uvue
浏览文件 @ 96dd2448
<script> <script>
export default { export default {
data() { data() {
return { return {
sliderValue: 50, sliderValue: 50,
sliderBlockSize: 20, sliderBlockSize: 20,
sliderBackgroundColor: "#000000", sliderBackgroundColor: "#000000",
sliderActiveColor: "#FFCC33", sliderActiveColor: "#FFCC33",
sliderBlockColor: "#8A6DE9", sliderBlockColor: "#8A6DE9",
// 组件属性 autotest // 组件属性 autotest
show_value_boolean: false, show_value_boolean: false,
disabled_boolean: false, disabled_boolean: false,
min_input: 0, min_input: 0,
max_input: 100, max_input: 100,
step_input: 1, step_input: 1,
value_input: 0, value_input: 0,
activeColor_input: "#007aff", activeColor_input: "#007aff",
backgroundColor_input: "#e9e9e9", backgroundColor_input: "#e9e9e9",
block_size_input: 28, block_size_input: 28,
block_color_input: "#ffffff", block_color_input: "#ffffff",
}; };
}, },
methods: { methods: {
sliderChange(e: SliderChangeEvent) { sliderChange(e : SliderChangeEvent) {
console.log("value 发生变化：" + e.detail.value); console.log("value 发生变化：" + e.detail.value);
}, },
slider_click() { slider_click() {
console.log("组件被点击时触发"); console.log("组件被点击时触发");
}, },
slider_touchstart() { slider_touchstart() {
console.log("手指触摸动作开始"); console.log("手指触摸动作开始");
}, },
slider_touchmove() { slider_touchmove() {
console.log("手指触摸后移动"); console.log("手指触摸后移动");
}, },
slider_touchcancel() { slider_touchcancel() {
console.log("手指触摸动作被打断，如来电提醒，弹窗"); console.log("手指触摸动作被打断，如来电提醒，弹窗");
}, },
slider_touchend() { slider_touchend() {
console.log("手指触摸动作结束"); console.log("手指触摸动作结束");
}, },
slider_tap() { slider_tap() {
console.log("手指触摸后马上离开"); console.log("手指触摸后马上离开");
}, },
slider_longpress() { slider_longpress() {
console.log( console.log(
"如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。" "如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。"
); );
}, },
slider_change() { slider_change() {
console.log("完成一次拖动后触发的事件，event.detail = {value: value}"); console.log("完成一次拖动后触发的事件，event.detail = {value: value}");
}, },
slider_changing() { slider_changing() {
console.log("拖动过程中触发的事件，event.detail = {value: value}"); console.log("拖动过程中触发的事件，event.detail = {value: value}");
}, },
change_show_value_boolean(checked: boolean) { change_show_value_boolean(checked : boolean) {
this.show_value_boolean = checked; this.show_value_boolean = checked;
}, },
change_disabled_boolean(checked: boolean) { change_disabled_boolean(checked : boolean) {
this.disabled_boolean = checked; this.disabled_boolean = checked;
}, },
confirm_min_input(value: number) { confirm_min_input(value : number) {
this.min_input = value; this.min_input = value;
}, },
confirm_max_input(value: number) { confirm_max_input(value : number) {
this.max_input = value; this.max_input = value;
}, },
confirm_step_input(value: number) { confirm_step_input(value : number) {
this.step_input = value; this.step_input = value;
}, },
confirm_value_input(value: number) { confirm_value_input(value : number) {
this.value_input = value; this.value_input = value;
}, },
confirm_activeColor_input(value: string) { confirm_activeColor_input(value : string) {
this.activeColor_input = value; this.activeColor_input = value;
}, },
confirm_backgroundColor_input(value: string) { confirm_backgroundColor_input(value : string) {
this.backgroundColor_input = value; this.backgroundColor_input = value;
}, },
confirm_block_size_input(value: number) { confirm_block_size_input(value : number) {
this.block_size_input = value; this.block_size_input = value;
}, },
confirm_block_color_input(value: string) { confirm_block_color_input(value : string) {
this.block_color_input = value; this.block_color_input = value;
}, },
}, },
}; };
</script> </script>
<template> <template>
<view class="main"> <view class="main">
<slider <slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :value="value_input"
:disabled="disabled_boolean" :activeColor="activeColor_input" :backgroundColor="backgroundColor_input" :block-size="block_size_input"
:min="min_input" :block-color="block_color_input" :show-value="show_value_boolean" @click="slider_click"
:max="max_input" @touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
:step="step_input" @touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
:value="value_input" @changing="slider_changing" style="width: 90%"><text>uni-app-x</text></slider>
:activeColor="activeColor_input"
:backgroundColor="backgroundColor_input"
:block-size="block_size_input"
:block-color="block_color_input"
:show-value="show_value_boolean"
@click="slider_click"
@touchstart="slider_touchstart"
@touchmove="slider_touchmove"
@touchcancel="slider_touchcancel"
@touchend="slider_touchend"
@tap="slider_tap"
@longpress="slider_longpress"
@change="slider_change"
@changing="slider_changing"
style="width: 90%"
><text>uni-app-x</text></slider
>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view class="content nvue"> <view class="content nvue">
<page-head title="组件属性"></page-head> <page-head title="组件属性"></page-head>
<boolean-data <boolean-data :defaultValue="false" title="是否显示当前 value" @change="change_show_value_boolean"></boolean-data>
:defaultValue="false" <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
title="是否显示当前 value" <input-data defaultValue="0" title="slider 最小值" type="number" @confirm="confirm_min_input"></input-data>
@change="change_show_value_boolean" <input-data defaultValue="100" title="slider 最大值" type="number" @confirm="confirm_max_input"></input-data>
></boolean-data> <input-data defaultValue="1" title="slider 步长，取值必须大于 0，并且可被(max - min)整除" type="number"
<boolean-data @confirm="confirm_step_input"></input-data>
:defaultValue="false" <input-data defaultValue="0" title="radio当前取值" type="number" @confirm="confirm_value_input"></input-data>
title="是否禁用" <input-data defaultValue="#007aff" title="slider 滑块左侧已选择部分的线条颜色" type="text"
@change="change_disabled_boolean" @confirm="confirm_activeColor_input"></input-data>
></boolean-data> <input-data defaultValue="#e9e9e9" title="radio背景条的颜色" type="text"
<input-data @confirm="confirm_backgroundColor_input"></input-data>
defaultValue="0" <input-data defaultValue="28" title="radio滑块的大小，取值范围为 12 - 28" type="number"
title="slider 最小值" @confirm="confirm_block_size_input"></input-data>
type="number" <input-data defaultValue="#ffffff" title="滑块颜色" type="text" @confirm="confirm_block_color_input"></input-data>
@confirm="confirm_min_input"
></input-data>
<input-data
defaultValue="100"
title="slider 最大值"
type="number"
@confirm="confirm_max_input"
></input-data>
<input-data
defaultValue="1"
title="slider 步长，取值必须大于 0，并且可被(max - min)整除"
type="number"
@confirm="confirm_step_input"
></input-data>
<input-data
defaultValue="0"
title="radio当前取值"
type="number"
@confirm="confirm_value_input"
></input-data>
<input-data
defaultValue="#007aff"
title="slider 滑块左侧已选择部分的线条颜色"
type="text"
@confirm="confirm_activeColor_input"
></input-data>
<input-data
defaultValue="#e9e9e9"
title="radio背景条的颜色"
type="text"
@confirm="confirm_backgroundColor_input"
></input-data>
<input-data
defaultValue="28"
title="radio滑块的大小，取值范围为 12 - 28"
type="number"
@confirm="confirm_block_size_input"
></input-data>
<input-data
defaultValue="#ffffff"
title="滑块颜色"
type="text"
@confirm="confirm_block_color_input"
></input-data>
</view> </view>
<view class="uni-padding-wrap"> <view class="uni-padding-wrap">
...@@ -195,51 +134,44 @@ export default { ...@@ -195,51 +134,44 @@ export default {
<slider @change="sliderChange" :value="60" :step="10" /> <slider @change="sliderChange" :value="60" :step="10" />
</view> </view>
<view class="uni-title">浮点步进:step=0.01跳动</view>
<view>
<slider :value="0.5" :min="0" :max="1" :step="0.01" :show-value="true" />
</view>
<view class="uni-title">设置最小/最大值</view> <view class="uni-title">设置最小/最大值</view>
<view> <view>
<slider <slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
@change="sliderChange"
:value="100"
:min="50"
:max="200"
:show-value="true"
/>
</view> </view>
<view class="uni-title">不同颜色和大小的滑块</view> <view class="uni-title">不同颜色和大小的滑块</view>
<view> <view>
<slider <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
class="slider-custom-color-and-size" :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
@change="sliderChange" :block-size="sliderBlockSize" />
:value="sliderValue"
:backgroundColor="sliderBackgroundColor"
:activeColor="sliderActiveColor"
:blockColor="sliderBlockColor"
:block-size="sliderBlockSize"
/>
</view> </view>
</view> </view>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<style> <style>
.main { .main {
max-height: 500rpx; max-height: 500rpx;
padding: 10rpx 0; padding: 10rpx 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
} }
.main .list-item { .main .list-item {
width: 100%; width: 100%;
height: 200rpx; height: 200rpx;
border: 1px solid #666; border: 1px solid #666;
} }
.m-l-a { .m-l-a {
margin-left: auto; margin-left: auto;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或