uniapp插件

「这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战」。

平台兼容性

首先我们看看考虑到的兼容的平台。

Vue2Vue3√×App微信小程序支付宝小程序百度小程序字节小程序QQ小程序快应用3.1.20 app-vue√?????H5-SafariAndroid Browser微信浏览器(Android)QQ浏览器(Android)ChromeIEEdgeFirefoxPC-Safari√√√√√?√√√功能说明

大致构思如图所示：1、选项胶囊需要有滑动切换效果。2、选项胶囊可自定义颜色、速度等。3、选项内容区域dom可以通过slot暴露，增加扩展性，并且对宽度不做固定限制。4、选项内容无数量限制，可设置不定宽或者定宽。5、事件点击反馈事件

参数使用确定

通过组件传参的方式实现要求2、选项胶囊可自定义颜色、速度等。

属性名类型默认值说明optionArray＜Object＞[{ name: ‘全部’}]菜单项目，name为当前显示字段，格式如:[{ name: ‘全部’}, { name: ‘选项一’ }]scrollBooleantrue是否滑动secNumber0.25胶囊速度widthNumber40胶囊宽colourStringrgba(243, 152, 0, 1)胶囊颜色事件和插槽确定

事件 @feedback5、事件点击反馈事件通过v-slot实现要求三。3、选项内容区域dom可以通过slot暴露，增加扩展性，并且对宽度不做固定限制。

属性名类型默认值说明@feedback[Number, String]-当前选中时的事件反馈，返回值为当前下标v-slotObject-插槽，通过v-slot:=”{ item, active }”获取，item为当前项数据，active为是否选中使用

使用方式考虑两种加载方式：1、全局引入：遵循uniapp-easycom组件规则，让组件导入既可用。点击查看easycom组件规则2、局部引入：遵循vue局部引入方式。例:

import duNav from ‘@/components/du-nav/du-nav.vue’export default { components: { duNav } } {{ item.name }} 复制代码示例

好了我们看看实例代码吧！组要分为滑动内容导航和定宽导航

可滑动导航（默认） {{ item.name }} 固定导航 {{ item.name }} /** * 插槽参数 active=>false true 可自行判断修改text样式 */export default { data() { return { list1: [ { name: ‘全部’, type: ‘0’ }, { name: ‘选项一’, type: ‘1’ }, { name: ‘选项二’, type: ‘2’ }, { name: ‘选项三’, type: ‘3’ }, { name: ‘选项四’, type: ‘4’ }, { name: ‘选项五’, type: ‘5’ }, { name: ‘选项六’, type: ‘6’ }, { name: ‘选项七’, type: ‘7’ } ], list2: [{ name: ‘全部’, type: ‘0’ }, { name: ‘选项一’, type: ‘1’ }, { name: ‘选项二’, type: ‘2’ }, { name: ‘选项二’, type: ‘3’ }] }; }, methods:{ /** * @param [Number, String] i 当前选中下标 */ feedback(i){ console.log(i) } }};.consent { margin-bottom: 12px; padding: 15upx; .consent-item-1 { border: 1upx solid #f4f4f4; } .consent-item-2 { border: 1upx solid #f4f4f4; padding: 0 20upx; //可自行调整内边距 }}复制代码结尾

细心的朋友可能发现前面说的 1、选项胶囊需要有滑动切换效果。和选项内容无数量限制，可设置不定宽或者定宽还没有说明。那怎么实现滑动？怎么不定宽实现胶囊的坐标滑动距离？今天我们将了大致的思路和属性的确定，我们明天就具体说说怎么实现吧。