对信开源圈子建站系统 对信开源系统+后台+PC+H5 (多圈) 诚信系统.zip

# y-tabs 标签页组件 <font color="#ff0000" size="6">注意：</font> + <font color="#ff0000" size="2">2.0.1+为非兼容性升级，重命名了诸多样式以及提供的属性名，也移除了部分属性及事件，如无必要，请勿升级，具体调整内容请查看更新记录。</font> </br> + [Tips](#tips) + [支持的平台](#supportPlatform) + [使用方式](#usageMode) + [滚动吸顶示例](#scrollExamples) + [与swiper联动示例](#LinkWithSwiperExamples) + [Tabs Props](#tabsProps) + [Tab Props](#tabProps) + [Tabs Events](#tabsEvents) + [Tabs Methods](#tabsMethod) + [Tabs Slots](#tabsSlots) + [Tab Slots](#tabSlots) + [注意事项及常见问题](#beCareful) <div id="tips" ></div> ## Tips + 如果代码有问题，可尝试下载最新代码（示例项目中的`uni_modules/y-tabs`是最新的）。 + 请保证<font color="#1989fa">HBuilderX正式版为 `v3.4.18`、Alpha版为 `v3.5.2`</font>。 + 使用该插件需安装`scss`插件。 + 点击右上角的“<font color="#1989fa">使用HubilderX导入示例项目</font>”按钮下载示例项目运行并查看效果，项目中内置不少案例。 + 也可扫描右侧图片中的微信小程序码查看（由于微信小程序审核较严，无法发布新版本，因此案例较老，最好运行示例项目查看）。 + 可以加QQ群交流反馈：`566764891`；也可以邮箱或QQ留言：`18508420370@163.com`、`1431948195`。 <div id="supportPlatform" ></div> ## 支持的平台 + H5、app-vue、微信、支付宝、钉钉、百度、字节、QQ、飞书、快手小程序可用，其他平台可自行测试。 + 暂不支持nvue。 <div id="usageMode" ></div> ## 使用方式 ### 1、通过HbuilerX创建项目 + 该组件符合`uni_modules`规范，使用`HbuilderX`导入插件到项目根目录下的`uni_modules`文件夹中。 + `template`中直接使用，无需单独引入注册组件。 ### 2、通过vue cli创建项目 + 需保证src下面有`uni_modules`文件夹，将y-tabs拷贝到里面 + 在`pages.json`中通过`easycom`的方式引入组件（tabs组件中使用了uni-icons，因此需要引入uni-ui） ``` json { "easycom": { "autoscan": true, "custom": { "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue", "^y-(.*)": "@/uni_modules/y-$1/components/y-$1.vue" } }, } ``` #### 普通案例 + <font color="#ff0000" size="2">注意：在QQ/百度/字节跳动/飞书/快手小程序中，自定义组件在渲染时会比App/H5端多一级节点，导致标签内容样式失效，需在组件上添加"`.y-tab-virtual`"的样式</font> ``` <template> <view> <y-tabs v-model="activeIndex" @click="tabClick" @change="tabChange"> <y-tab class="y-tab-virtual" v-for="index in 5" :key="index" :title="'标签'+index"> <view class="content-wrap"> 内容{{index}} </view> </y-tab> </y-tabs> </view> </template> <script> export default { data() { return { activeIndex: 0, } }, methods: { // 标签点击事件 tabClick(index, item) { console.log("tabClick", index, item); }, // 标签切换事件 tabChange(index, item) { console.log("tabChange", index, item); } } } </script> <style scoped> /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */ .y-tab-virtual { position: relative; flex-shrink: 0; width: 100%; } </style> ``` <div id="scrollExamples" ></div> #### 滚动吸顶示例 直接开启`sticky`属性即可 ``` <template> <view> <y-tabs v-model="activeIndex" sticky :offsetTop="offsetTop"> <y-tab class="y-tab-virtual" v-for="index in 5" :key="index" :title="'标签'+index"> <view class="content-wrap"> 内容{{index}} </view> </y-tab> </y-tabs> </view> </template> <script> export default { data() { return { activeIndex: 0, offsetTop: 0, //粘性布局下与顶部的最小距离 } }, created() { // H5端需要减去顶部导航栏高度 // #ifdef H5 this.offsetTop = 43 // #endif }, } </script> <style scoped> /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */ .y-tab-virtual { position: relative; flex-shrink: 0; width: 100%; } .content-wrap{ height:200vh; } </style> ``` <div id="LinkWithSwiperExamples" ></div> #### 与`Swiper`联动示例 + 请注意`Swiper`组件的`@transition`、`@animationfinish`的支持平台 + `barAnimateMode="worm"`,设置底部条切换类似毛毛虫蠕动的效果 + 经过测试，仅支持App、H5、微信、支付宝、字节跳动、QQ、快手小程序 ``` <template> <view> <y-tabs ref="tabs" v-model="activeIndex" barAnimateMode="worm"> <y-tab v-for="(item, index) in tabs" :title="item.title" :key="index" /> </y-tabs> <!-- 支持平台 1. @transition: 支持App、H5、微信、支付宝、字节跳动、飞书、QQ、快手 2. @animationfinish: 字节跳动、飞书小程序不支持(在change事件中unlockDx) --> <swiper class="swiper" :current="activeIndex" @transition="onTransition" @animationfinish="onAnimationfinish" @change="swpierChange"> <swiper-item v-for="(item, index) in tabs" :key="index"> <view class="swiper-item-view" :style="{backgroundColor: item.color}"> {{item.title}} </view> </swiper-item> </swiper> </view> </template> <script> export default { data() { return { tabs: [], activeIndex: 0, } }, created() { this.tabs = Array.from({ length: 5 }, (o, i) => { return { title: 'tab' + (i + 1), color: this._getRandomColor() } }); }, methods: { //swiper滑动中 onTransition(e) { this.$refs.tabs.setDx(e.detail.dx); }, //swiper滑动结束 onAnimationfinish(e) { this.activeIndex = e.detail.current; setTimeout(() => this.$refs.tabs.unlockDx(), 0) //通知y-tabs解除对setDx()的锁定 }, swpierChange(e) { // 由于字节跳动、飞书不支持@animationfinish，因此在change事件中unlockDx // #ifdef MP-TOUTIAO || MP-LARK this.onAnimationfinish(e) // #endif }, // 生成随机颜色 _getRandomColor() { const rgb = []; for (let i = 0; i < 3; ++i) { let color = Math.floor(Math.random() * 256).toString(16) color = color.length == 1 ? '0' + color : color rgb.push(color) } return '#' + rgb.join(''); }, }, } </script> <style scoped> .swiper { height: 300rpx; } .swiper-item-view { background-color: #007AFF; height: 300rpx; display: flex; justify-content: center; align-items: center; color: white; font-size: 50rpx; } </style> ``` <div id="tabsProps" ></div> ## Tabs Props <table> <tr><th style="width:15%;">参数</th><th style="width:15%;">类型</th><th style="width:30%;">描述</th><th style="width:10%;">默认值</th><th style="width:30%;">说明</th></tr> <tr><td> v-model </td><td> number、string </td><td> 绑定当前选中标签的标识符 </td><td> 0 </td><td> 即tab选中项的下标或者tab的name属性值 </td></tr> <tr><td> type </td><td> string </td><td> 样式风格类型 </td><td> line</td><td> 可选值为 text、card、button、line-button </td></tr> <tr><td> color </td><td> string </td><td> 标签主题色 </td><td> <font color="#0022AB">#0022AB</font> </td><td> </td></tr> <tr><td> background </td><td> string </td><td> 标签栏背景色 </td><td> #fff </td><td> </td></tr> <tr><td> title-active-color </td><td> string </td><td> 标题选中态颜色 </td><td> - </td><td> </td></tr> <tr><td> title-inactive-color </td><td> string </td><td> 标题默认态颜色 </td><td> - </td><td> </td></tr> <tr><td> wrap-style </td><td> object </td><td> 标签栏样式 <font color="#1989fa" size="1">案例 ：透明导航栏下的滚动吸顶</font> </td><td> - </td><td> </td></tr> <tr><td> direction </td><td> string </td><td> 标签栏的展示方位 </td><td> horizontal </td><td> 可选值：vertical </td></tr> <tr> <td> duration </td> <td> number、string </td> <td> 动画时间，单位�