提交 34a4df98 编写于 作者: H hdx

feat: add slider switch

上级 271a4502
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
export default {
onLaunch: function() {
console.log('App Launch')
// const performance: Performance = uni.getPerformance()
// const observer1: PerformanceObserver = performance.createObserver((entryList: PerformanceObserverEntryList) => {
// console.log("observer1:entryList.getEntries()" + JSON.stringify(entryList.getEntries()))
// })
// observer1.observe({ entryTypes: ['render', 'navigation'] } as PerformanceObserverOptions)
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
@import './common/uni.css';
</style>
/*每个页面公共css */
@import './common/uni.css';
</style>
\ No newline at end of file
......@@ -36,7 +36,6 @@
"navigationBarTitleText": "button"
}
},
{
"path": "pages/component/radio/radio",
"style": {
......@@ -61,6 +60,18 @@
"navigationBarTitleText": "textarea"
}
},
{
"path": "pages/component/slider/slider",
"style": {
"navigationBarTitleText": "slider"
}
},
{
"path": "pages/component/switch/switch",
"style": {
"navigationBarTitleText": "switch"
}
},
{
"path": "pages/component/image/image",
"style": {
......
<template>
<view class="uni-padding-wrap">
<page-head :title="title"></page-head>
<view class="uni-title">显示当前value</view>
<view>
<slider @change="sliderChange" :value="50" :show-value="true" />
</view>
<view class="uni-title">设置步进step跳动</view>
<view>
<slider @change="sliderChange" :value="60" :step="5" />
</view>
<view class="uni-title">设置最小/最大值</view>
<view>
<slider @change="sliderChange" :value="100" :min="50" :max="200" :show-value="true" />
</view>
<view class="uni-title">不同颜色和大小的滑块</view>
<view>
<slider @change="sliderChange" :value="50" backgroundColor="#000000" activeColor="#FFCC33" block-color="#8A6DE9"
:block-size="20" />
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'slider 滑块'
}
},
methods: {
sliderChange(e : SliderChangeEvent) {
console.log('value 发生变化:' + e.detail.value)
}
}
}
</script>
<style>
</style>
<template>
<view class="uni-padding-wrap">
<view class="uni-common-mt">
<view class="uni-title">默认样式</view>
<view class="flex-row">
<switch :checked="true" @change="switch1Change" />
<switch @change="switch2Change" />
</view>
<view class="uni-title">不同颜色和尺寸的switch</view>
<view class="flex-row">
<switch color="#FFCC33" style="transform:scale(0.7)" :checked="true" />
<switch color="#FFCC33" style="transform:scale(0.7)" />
</view>
<view class="uni-title">推荐展示样式</view>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">开启中</view>
<switch :checked="true" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">关闭</view>
<switch />
</view>
</view>
</view>
</template>
<script lang="ts">
export default {
data() {
return {
title: 'switch 开关'
}
},
methods: {
switch1Change: function (e : SwitchChangeEvent) {
console.log('switch1 发生 change 事件,携带值为', e.detail.value)
},
switch2Change: function (e : SwitchChangeEvent) {
console.log('switch2 发生 change 事件,携带值为', e.detail.value)
}
}
}
</script>
<style>
.flex-row {
flex-direction: row;
}
</style>
\ No newline at end of file
......@@ -122,10 +122,10 @@
enable: true
}, {
name: 'slider',
enable: false
enable: true
}, {
name: 'switch',
enable: false
enable: true
}, {
name: 'textarea',
enable: true
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册