更新记录
1.2.2(2023-04-13)
下载此版本
优化;
2023-04-13
1.2.1(2023-04-06)
下载此版本
优化;
2023-04-06
1.2.0(2023-04-06)
下载此版本
新增;
2023-04-06
查看更多
平台兼容性
HbuilderX/cli最低兼容版本 |
3.1.0 |
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
yt-selector 使用说明
〇、简介
- 这是杭州云童智能科技有限公司使用的小程序端的选项切换组件
一、使用说明
-
右侧点击使用 HBuilderX 导入插件
-
引用组件
<yt-selector switchName1="你好" switchName2="云童" ref="message"></yt-selector>
<template v-slot:dom1><view class="com">页面1</view></template>
<template v-slot:dom2><view class="com">页面2</view></template>
eaasdw() {
//只能传值1||2,传1 切换页面1,传2 切换页面2,空为undefined
this.$refs.message.switchPage();
}
二、参数说明
参数名 |
类型 |
说明 |
必填 |
默认值 |
switchName1 |
String |
左边切换按钮文字 |
是 |
"" |
switchName2 |
String |
右边切换按钮文字 |
是 |
"" |
三、事件说明
事件名称 |
传参 |
说明 |
回调参数 |
switchPageCallback |
/ |
切换事件回调 |
无 |
四、其他说明
五、示例代码
<template>
<view class="content">
<yt-selector switchName1="你好" switchName2="云童" @switchPageCallback="selectIndex" ref="message">
<template v-slot:dom1>
<view class="com">
页面1
</view>
</template>
<template v-slot:dom2>
<view class="com">
页面2
</view>
</template>
</yt-selector>
<view class="mam" @click="clickToSwitchPage">2</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
//切换事件回调
selectIndex(i) {
console.log(i);
},
//只能传值1||2,传1 切换页面1,传2 切换页面2,空为undefined
clickToSwitchPage() {
this.$refs.message.switchPage(2);
}
}
}
</script>
<style>
.com {
width: 100vh;
height: 600rpx;
background-color: aquamarine;
}
.mam {
width: 50rpx;
height: 50rpx;
background-color: aqua;
}
</style>