HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uniapp 电子签名 包含 返回 撤回 颜色 线条等功能

源码 组件 uniapp 签名

请观看

使用教程
第一步 引入图标
在项目中的App.vue内添加下面代码

<style>  
    /*引入图标路径 */  
    @import 'uni_modules/TC-qianming/libs/css/iconfont.css';  
</style>

第二步 引入组件即可

<template>  
    <view>  
   <TC-qianming></TC-qianming>  
    </view>  
</template>

下载链接(点击)

提需求 问题反馈 联系作者 V:ANKR6699
有什么不足之处所以留言提出,我将更新和更改

公众号也望大家关注一下

继续阅读 »

请观看

使用教程
第一步 引入图标
在项目中的App.vue内添加下面代码

<style>  
    /*引入图标路径 */  
    @import 'uni_modules/TC-qianming/libs/css/iconfont.css';  
</style>

第二步 引入组件即可

<template>  
    <view>  
   <TC-qianming></TC-qianming>  
    </view>  
</template>

下载链接(点击)

提需求 问题反馈 联系作者 V:ANKR6699
有什么不足之处所以留言提出,我将更新和更改

公众号也望大家关注一下

收起阅读 »

24小时在线接单(或全职)本人开发过多个uniapp项目(各种类型业务小程序和h5) 完美还原设计稿

vue.js
  1. 精通react ,vue
  2. 熟悉各种类型业务
  3. 完美还原设计稿UI图
  4. 有大量时间

微信: h877488642

  1. 精通react ,vue
  2. 熟悉各种类型业务
  3. 完美还原设计稿UI图
  4. 有大量时间

微信: h877488642

可惜,是时候告别 HBuilderX 了

项目模板 uniapp模板

banner

文档 - https://vitesse-docs.netlify.app
GitHub - http://github.com/uni-helper
官网 - https://uni-helper.js.org

继续阅读 »

banner

文档 - https://vitesse-docs.netlify.app
GitHub - http://github.com/uni-helper
官网 - https://uni-helper.js.org

收起阅读 »

违法与不良信息信息举报

网络信息

为了进一步落实网信办各专项行动要求,营造良好网上舆论氛围,即日起开设「违法与不良信息信息举报」专项受理渠道。

  • 「清朗·生活服务类平台信息内容整治」专项行动
  • 「清朗·打击网络谣言和虚假信息」专项行动
  • 「清朗·规范重点流量环节网络传播秩序」专项行动

另外如果您发现用户发布的内容、用户昵称等存在违法、违规或其它不良信息,也可通过下述方式向DCloud官方进行举报。

举报受理方式
举报邮箱:service@dcloud.io

继续阅读 »

为了进一步落实网信办各专项行动要求,营造良好网上舆论氛围,即日起开设「违法与不良信息信息举报」专项受理渠道。

  • 「清朗·生活服务类平台信息内容整治」专项行动
  • 「清朗·打击网络谣言和虚假信息」专项行动
  • 「清朗·规范重点流量环节网络传播秩序」专项行动

另外如果您发现用户发布的内容、用户昵称等存在违法、违规或其它不良信息,也可通过下述方式向DCloud官方进行举报。

举报受理方式
举报邮箱:service@dcloud.io

收起阅读 »

Wot Design Uni 上新 Navbar 自定义导航栏组件 ,赶快进来看看效果吧!

自定义导航 自定义导航栏 导航栏组件

Navbar 导航栏

为页面提供导航功能,常用于页面顶部。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

:: tip 常见问题

右图标被小程序胶囊挡住?

在小程序平台开启自定义顶部导航时,右上角会固定显示胶囊,所以此时右侧插槽及选项是不建议使用。

如何设置为背景透明?

通过 custom-style 设置组件 background-colortransparent

<wd-navbar title="标题" custom-style="background-color: transparent !important;"></wd-navbar>

组件会被 video 覆盖?

video为原生组件,层级较高,目前无法遮盖,需要具体平台具体分析。 ::

基础用法

通过 title 属性设置导航栏标题。

<wd-navbar title="标题"></wd-navbar>

返回上级

在导航栏实现返回上级功能。

<wd-navbar title="标题" left-text="返回" left-arrow @click-left="handleClickLeft"></wd-navbar>
function handleClickLeft() {  
  uni.navigateBack()  
}

右侧按钮

在导航栏右侧添加可点击的按钮。

<wd-toast></wd-toast>  

<wd-navbar title="标题" left-text="返回" left-arrow right-text="按钮" @click-left="handleClickLeft" @click-right="handleClickRight"></wd-navbar>
import { useToast } from '@/uni_modules/wot-design-uni'  

const { show: showToast } = useToast()  

function handleClickRight() {  
  showToast('按钮')  
}

使用插槽

可以通过 leftright 插槽自定义导航栏两侧的内容。

<wd-navbar title="标题" left-text="返回" left-arrow>  
  <template #right>  
    <wd-icon name="search" size="18" />  
  </template>  
</wd-navbar>

固定在顶部

通过 fixed 可以设置导航条固定在页面顶部,通过设置 placeholder 可以在顶部生成占位空间,通过设置 safeAreaInsetTop 可以开启顶部安全区的适配。

<wd-navbar fixed placeholder title="Navbar 导航条" left-arrow safeAreaInsetTop></wd-navbar>  

禁用按钮

通过 left-disabledright-disabled 属性来禁用两侧的按钮。按钮被禁用时透明度降低,且无法点击。

<wd-navbar title="标题" left-text="返回" right-text="按钮" left-arrow left-disabled right-disabled></wd-navbar>

胶囊样式

通过 capsule 插槽和 navbar-capsule 组件定制返回胶囊。

<wd-navbar title="标题" left-text="返回" right-text="设置" left-arrow>  
  <template #capsule>  
    <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />  
  </template>  
</wd-navbar>
function handleBack() {  
  uni.navigateBack({})  
}  

function handleBackHome() {  
  uni.reLaunch({ url: '/pages/index/Index' })  
}

带搜索栏

通过 title 插槽,自定义标题。

<wd-navbar left-text="返回" right-text="设置" left-arrow>  
  <template #title>  
    <view class="search-box">  
      <wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>  
    </view>  
  </template>  
</wd-navbar>
.search-box {  
  display: flex;  
  height: 100%;  
  align-items: center;  
  --wot-search-padding: 0;  
  --wot-search-side-padding: 0;  
}

Attributes

参数 说明 类型 可选值 默认值 最低版本
title 卡片标题 string - '' 0.1.33
leftText 左侧文案 string - '' 0.1.33
rightText 右侧文案 string - '' 0.1.33
leftArrow 显示左侧箭头 boolean true, false false 0.1.33
bordered 显示下边框 boolean true, false true 0.1.33
fixed 固定到顶部 boolean true, false false 0.1.33
placeholder 固定在顶部时,在标签位置生成一个等高的占位元素 boolean true, false false 0.1.33
zIndex 导航栏 z-index number - 1 0.1.33
safeAreaInsetTop 开启顶部安全区适配 boolean true, false false 0.1.33
leftDisabled 禁用左侧按钮,禁用时透明度降低,且无法点击 boolean true, false false 0.1.33
rightDisabled 禁用右侧按钮,禁用时透明度降低,且无法点击 boolean true, false false 0.1.33

Events

事件名称 说明 参数 最低版本
click-left 点击左侧按钮时触发 - 0.1.33
click-right 点击右侧按钮时触发 - 0.1.33

Capsule Events

事件名称 说明 参数 最低版本
back 点击返回按钮时触发 - 0.1.33
back-home 点击返回首页按钮时触发 - 0.1.33

Slot

名称 说明 最低版本
capsule 自定义胶囊(当存在胶囊时,left不生效) 0.1.33
left 左侧内容 0.1.33
title 标题内容 0.1.33
right 右侧内容 0.1.33

外部样式类

类名 说明 最低版本
custom-class 根节点样式类 0.1.33
custom-style 根节点样式 0.1.33

地址

Github
文档网站
插件市场
QQ群

继续阅读 »

Navbar 导航栏

为页面提供导航功能,常用于页面顶部。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

:: tip 常见问题

右图标被小程序胶囊挡住?

在小程序平台开启自定义顶部导航时,右上角会固定显示胶囊,所以此时右侧插槽及选项是不建议使用。

如何设置为背景透明?

通过 custom-style 设置组件 background-colortransparent

<wd-navbar title="标题" custom-style="background-color: transparent !important;"></wd-navbar>

组件会被 video 覆盖?

video为原生组件,层级较高,目前无法遮盖,需要具体平台具体分析。 ::

基础用法

通过 title 属性设置导航栏标题。

<wd-navbar title="标题"></wd-navbar>

返回上级

在导航栏实现返回上级功能。

<wd-navbar title="标题" left-text="返回" left-arrow @click-left="handleClickLeft"></wd-navbar>
function handleClickLeft() {  
  uni.navigateBack()  
}

右侧按钮

在导航栏右侧添加可点击的按钮。

<wd-toast></wd-toast>  

<wd-navbar title="标题" left-text="返回" left-arrow right-text="按钮" @click-left="handleClickLeft" @click-right="handleClickRight"></wd-navbar>
import { useToast } from '@/uni_modules/wot-design-uni'  

const { show: showToast } = useToast()  

function handleClickRight() {  
  showToast('按钮')  
}

使用插槽

可以通过 leftright 插槽自定义导航栏两侧的内容。

<wd-navbar title="标题" left-text="返回" left-arrow>  
  <template #right>  
    <wd-icon name="search" size="18" />  
  </template>  
</wd-navbar>

固定在顶部

通过 fixed 可以设置导航条固定在页面顶部,通过设置 placeholder 可以在顶部生成占位空间,通过设置 safeAreaInsetTop 可以开启顶部安全区的适配。

<wd-navbar fixed placeholder title="Navbar 导航条" left-arrow safeAreaInsetTop></wd-navbar>  

禁用按钮

通过 left-disabledright-disabled 属性来禁用两侧的按钮。按钮被禁用时透明度降低,且无法点击。

<wd-navbar title="标题" left-text="返回" right-text="按钮" left-arrow left-disabled right-disabled></wd-navbar>

胶囊样式

通过 capsule 插槽和 navbar-capsule 组件定制返回胶囊。

<wd-navbar title="标题" left-text="返回" right-text="设置" left-arrow>  
  <template #capsule>  
    <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />  
  </template>  
</wd-navbar>
function handleBack() {  
  uni.navigateBack({})  
}  

function handleBackHome() {  
  uni.reLaunch({ url: '/pages/index/Index' })  
}

带搜索栏

通过 title 插槽,自定义标题。

<wd-navbar left-text="返回" right-text="设置" left-arrow>  
  <template #title>  
    <view class="search-box">  
      <wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>  
    </view>  
  </template>  
</wd-navbar>
.search-box {  
  display: flex;  
  height: 100%;  
  align-items: center;  
  --wot-search-padding: 0;  
  --wot-search-side-padding: 0;  
}

Attributes

参数 说明 类型 可选值 默认值 最低版本
title 卡片标题 string - '' 0.1.33
leftText 左侧文案 string - '' 0.1.33
rightText 右侧文案 string - '' 0.1.33
leftArrow 显示左侧箭头 boolean true, false false 0.1.33
bordered 显示下边框 boolean true, false true 0.1.33
fixed 固定到顶部 boolean true, false false 0.1.33
placeholder 固定在顶部时,在标签位置生成一个等高的占位元素 boolean true, false false 0.1.33
zIndex 导航栏 z-index number - 1 0.1.33
safeAreaInsetTop 开启顶部安全区适配 boolean true, false false 0.1.33
leftDisabled 禁用左侧按钮,禁用时透明度降低,且无法点击 boolean true, false false 0.1.33
rightDisabled 禁用右侧按钮,禁用时透明度降低,且无法点击 boolean true, false false 0.1.33

Events

事件名称 说明 参数 最低版本
click-left 点击左侧按钮时触发 - 0.1.33
click-right 点击右侧按钮时触发 - 0.1.33

Capsule Events

事件名称 说明 参数 最低版本
back 点击返回按钮时触发 - 0.1.33
back-home 点击返回首页按钮时触发 - 0.1.33

Slot

名称 说明 最低版本
capsule 自定义胶囊(当存在胶囊时,left不生效) 0.1.33
left 左侧内容 0.1.33
title 标题内容 0.1.33
right 右侧内容 0.1.33

外部样式类

类名 说明 最低版本
custom-class 根节点样式类 0.1.33
custom-style 根节点样式 0.1.33

地址

Github
文档网站
插件市场
QQ群

收起阅读 »

image组件显示右侧有白边

image

一个盒子里面有一个image,image右侧会出现一个2像素的白边这是啥问题

一个盒子里面有一个image,image右侧会出现一个2像素的白边这是啥问题

关于在uniapp中使用v-html渲染html字符串时,html字符串内容过多且html内容渲染出来后超出可视区域的解决方案

html 渲染

问题:使用v-html渲染html字符串时,html字符串内容过多且html内容渲染出来后超出可视区域

  1. 在H5和app中解决方案
    在h5中可使用canvas是绘制生成图片实现,app是通过缩放实现,为了适配不同机型需要动态计算一个缩放比,且缩放原点为style="transform-origin: top left;
    • 下载 npm install html2canvas
    • 在渲染html的页面引入html2canvas
import html2canvas from 'html2canvas'
  • 在template中编写
    <!-- #ifdef APP-PLUS -->  
    <view v-if="!ratioX" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <!-- #ifdef H5 -->  
    <view v-if="!pdfImage" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <scroll-view scroll-y="true" scroll-with-animation="true" style="width: 100%; height: 100%; margin-top: 10rpx;">  
        <!-- #ifdef APP-PLUS -->  
        <view v-html="html" style="transform-origin: top left;" :style="{ 'transform': `scale(${ratioX})` }"></view>  
        <!-- #endif -->  
        <!-- #ifdef H5 -->  
        <img style="width: 100%; height: auto;" v-if="pdfImage" :src="pdfImage" alt="Rendered PDF"></img>  
        <!-- #endif -->  
    </scroll-view>
  • 在data() {},中定义
    data() {  
            return {  
                html: null,  
                pdfImage: null,  
                ratioX: null,  
            };  
        },
  • 重点:通过接口获得html字符串并且生成图片
    async onLoad(option) {  
              await this.getPrictOrder()  
          await this.$nextTick()  
         setTimeout(async () => {  
             // #ifdef H5  
         await this.convertToPDF()  
        // #endif  
        // #ifdef APP-PLUS  
        await this.toGetContentToConvert()  
        // #endif  
        }, 0)                                                                                                                                                     
    }         
    methods: {  
                      //计算ratioX,缩放比  
            toGetContentToConvert() {  
                let winInfo = uni.getSystemInfoSync();  
                const query = uni.createSelectorQuery().in(this);  
                query.select('#contentToConvert').boundingClientRect(data => {  
                    if (data.width === 0) {  
                        this.toGetContentToConvert()  
                        return  
                    }  
                    this.ratioX = winInfo.windowWidth / data.width  
                }).exec();  
            },  
            convertToPDF() {  
                return new Promise((resolve) => {  
                    setTimeout(() => {  
                        // #capture 就是我们要获取截图对应的 DOM 元素选择器  
                        html2canvas(document.getElementById('contentToConvert'), {  
                            useCORS: true, // 【重要】开启跨域配置  
                            allowTaint: true, // 允许跨域图片  
                        }).then((canvas) => {  
                            this.pdfImage = canvas.toDataURL('image/jpeg');  
                        });  
                        uni.hideLoading()  
                    }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成  
                });  
            },  
    }                
继续阅读 »

问题:使用v-html渲染html字符串时,html字符串内容过多且html内容渲染出来后超出可视区域

  1. 在H5和app中解决方案
    在h5中可使用canvas是绘制生成图片实现,app是通过缩放实现,为了适配不同机型需要动态计算一个缩放比,且缩放原点为style="transform-origin: top left;
    • 下载 npm install html2canvas
    • 在渲染html的页面引入html2canvas
import html2canvas from 'html2canvas'
  • 在template中编写
    <!-- #ifdef APP-PLUS -->  
    <view v-if="!ratioX" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <!-- #ifdef H5 -->  
    <view v-if="!pdfImage" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <scroll-view scroll-y="true" scroll-with-animation="true" style="width: 100%; height: 100%; margin-top: 10rpx;">  
        <!-- #ifdef APP-PLUS -->  
        <view v-html="html" style="transform-origin: top left;" :style="{ 'transform': `scale(${ratioX})` }"></view>  
        <!-- #endif -->  
        <!-- #ifdef H5 -->  
        <img style="width: 100%; height: auto;" v-if="pdfImage" :src="pdfImage" alt="Rendered PDF"></img>  
        <!-- #endif -->  
    </scroll-view>
  • 在data() {},中定义
    data() {  
            return {  
                html: null,  
                pdfImage: null,  
                ratioX: null,  
            };  
        },
  • 重点:通过接口获得html字符串并且生成图片
    async onLoad(option) {  
              await this.getPrictOrder()  
          await this.$nextTick()  
         setTimeout(async () => {  
             // #ifdef H5  
         await this.convertToPDF()  
        // #endif  
        // #ifdef APP-PLUS  
        await this.toGetContentToConvert()  
        // #endif  
        }, 0)                                                                                                                                                     
    }         
    methods: {  
                      //计算ratioX,缩放比  
            toGetContentToConvert() {  
                let winInfo = uni.getSystemInfoSync();  
                const query = uni.createSelectorQuery().in(this);  
                query.select('#contentToConvert').boundingClientRect(data => {  
                    if (data.width === 0) {  
                        this.toGetContentToConvert()  
                        return  
                    }  
                    this.ratioX = winInfo.windowWidth / data.width  
                }).exec();  
            },  
            convertToPDF() {  
                return new Promise((resolve) => {  
                    setTimeout(() => {  
                        // #capture 就是我们要获取截图对应的 DOM 元素选择器  
                        html2canvas(document.getElementById('contentToConvert'), {  
                            useCORS: true, // 【重要】开启跨域配置  
                            allowTaint: true, // 允许跨域图片  
                        }).then((canvas) => {  
                            this.pdfImage = canvas.toDataURL('image/jpeg');  
                        });  
                        uni.hideLoading()  
                    }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成  
                });  
            },  
    }                
收起阅读 »

uni-app实现弹出框组件禁止滚动穿透

滚动透传

在uni-app开发中,经常会使用弹出框、遮罩层以及日期选择器等组件,但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时,继续滑动会导致底层页面的滚动,这可能会影响用户体验。为了解决这个问题,我们可以采用以下方法。

滚动穿透是什么?

滚动穿透问题通常在使用弹出层、遮罩层或日期选择器等组件时出现。用户在组件内滚动内容时,当内容滚动到底部后,继续滑动可能导致底层页面也滚动,这不符合用户的期望。以下是两种解决方法。

解决方案

1. 禁止蒙版的滚动穿透

如果你想要禁止蒙版下的页面滚动,可以使用以下方法:

<!-- page-meta 只能是页面内的第一个节点 -->  
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>  

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

在上述代码中,我们使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show10 变量的值来控制页面的滚动。当 show10true 时,底层页面的滚动被禁止,从而解决了滚动穿透问题。

2. 禁止Popup内容区域的滚动穿透

注意:在h5平台可以通过动态修改body标签的样式,设置 overflow:hidden 即可解决滚动穿透,无循进行本章节的配置

a) 使用 page-meta 组件动态修改 page-metaoverflow 属性

<!-- page-meta 只能是页面内的第一个节点 -->  
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>  

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

这个方法与上述禁止蒙版滚动穿透的方法类似,但它专门用于禁止Popup内容区域的滚动穿透。

b) 将页面包裹在 <scroll-view> 标签中,并设置高度为100vh

<scroll-view style="height: 100vh;">  
  <!-- 页面内容 -->  
</scroll-view>

通过将页面内容包裹在 <scroll-view> 标签中,并设置高度为100vh(即视口的高度),可以有效地防止Popup内容区域的滚动穿透。这种方法不需要额外的组件配置,非常简单。

关于 page-meta

page-meta 是一个用于指定页面属性和监听页面事件的组件,它可以部分替代 pages.json 的功能。它的引入使得在vue文件中配置页面属性成为可能,从而实现更灵活的页面管理。

尽管 page-meta 具有一定的替代作用,但在性能方面不如 pages.json 的配置。在新页面加载时,使用 pages.json 的方式更为高效。

综上所述,通过合理使用上述方法,你可以轻松解决uni-app中的滚动穿透问题,提升用户体验

完整实现

可以参考 wot-design-uni 组件库的 popup 组件的实现。
Github
文档网站
插件市场
QQ群

继续阅读 »

在uni-app开发中,经常会使用弹出框、遮罩层以及日期选择器等组件,但在这些组件中可能会出现滚动穿透的问题。滚动穿透是指当组件内的内容滚动到底部时,继续滑动会导致底层页面的滚动,这可能会影响用户体验。为了解决这个问题,我们可以采用以下方法。

滚动穿透是什么?

滚动穿透问题通常在使用弹出层、遮罩层或日期选择器等组件时出现。用户在组件内滚动内容时,当内容滚动到底部后,继续滑动可能导致底层页面也滚动,这不符合用户的期望。以下是两种解决方法。

解决方案

1. 禁止蒙版的滚动穿透

如果你想要禁止蒙版下的页面滚动,可以使用以下方法:

<!-- page-meta 只能是页面内的第一个节点 -->  
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>  

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

在上述代码中,我们使用了 page-meta 组件来动态修改页面的 overflow 属性,通过绑定 show10 变量的值来控制页面的滚动。当 show10true 时,底层页面的滚动被禁止,从而解决了滚动穿透问题。

2. 禁止Popup内容区域的滚动穿透

注意:在h5平台可以通过动态修改body标签的样式,设置 overflow:hidden 即可解决滚动穿透,无循进行本章节的配置

a) 使用 page-meta 组件动态修改 page-metaoverflow 属性

<!-- page-meta 只能是页面内的第一个节点 -->  
<page-meta :page-style="`overflow:${show10 ? 'hidden' : 'visible'};`"></page-meta>  

<wd-popup v-model="show10" lock-scroll position="bottom" :safe-area-inset-bottom="true" custom-style="height: 200px;" @close="handleClose10"></wd-popup>

这个方法与上述禁止蒙版滚动穿透的方法类似,但它专门用于禁止Popup内容区域的滚动穿透。

b) 将页面包裹在 <scroll-view> 标签中,并设置高度为100vh

<scroll-view style="height: 100vh;">  
  <!-- 页面内容 -->  
</scroll-view>

通过将页面内容包裹在 <scroll-view> 标签中,并设置高度为100vh(即视口的高度),可以有效地防止Popup内容区域的滚动穿透。这种方法不需要额外的组件配置,非常简单。

关于 page-meta

page-meta 是一个用于指定页面属性和监听页面事件的组件,它可以部分替代 pages.json 的功能。它的引入使得在vue文件中配置页面属性成为可能,从而实现更灵活的页面管理。

尽管 page-meta 具有一定的替代作用,但在性能方面不如 pages.json 的配置。在新页面加载时,使用 pages.json 的方式更为高效。

综上所述,通过合理使用上述方法,你可以轻松解决uni-app中的滚动穿透问题,提升用户体验

完整实现

可以参考 wot-design-uni 组件库的 popup 组件的实现。
Github
文档网站
插件市场
QQ群

收起阅读 »

有偿,写一个unicloud后台搜索功能

招聘 外包

此需求已经有人帮忙实现。。结题。

有个管理后台的小需求,有偿求助。 [表情]
需求是对A表数据进行筛选。
有3个unicloud的表:
一张A表,
一张B表,
一张AB关联表(存的是A_id,B_id)。
需求是对A表数据进行筛选。操作看下图。在A表列表上,通过下拉选择1个B_id, 然后查询AB表,找出所有与B_id关联的A_id. 然后在A表中把这些数据显示出来 。

继续阅读 »

此需求已经有人帮忙实现。。结题。

有个管理后台的小需求,有偿求助。 [表情]
需求是对A表数据进行筛选。
有3个unicloud的表:
一张A表,
一张B表,
一张AB关联表(存的是A_id,B_id)。
需求是对A表数据进行筛选。操作看下图。在A表列表上,通过下拉选择1个B_id, 然后查询AB表,找出所有与B_id关联的A_id. 然后在A表中把这些数据显示出来 。

收起阅读 »

通用社区、论坛前端模板,无缝集成

论坛 插件

星之链社区-通用前端模板

让你的项目无缝接入社区功能,组件高可复用,全端兼容

插件市场地址:https://ext.dcloud.net.cn/plugin?id=14841

星之链社区-通用前端模板

让你的项目无缝接入社区功能,组件高可复用,全端兼容

插件市场地址:https://ext.dcloud.net.cn/plugin?id=14841

Wot Design Uni 上新 Tabbar 标签栏组件 ,赶快进来看看效果吧!

自定义导航栏 底部选项卡

Tabbar 标签栏

底部导航栏,用于在不同页面之间进行切换。

何时使用

  • 需要定制底部导航栏时

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

v-model 为绑定值,表示选中标签的索引值或者名称。

<wd-tabbar v-model="tabbar1">  
  <wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>  
</wd-tabbar>
import { ref } from 'vue'  

const tabbar1 = ref('home')

通过名称匹配

通过设置 name 属性,可以通过名称匹配选中标签。

<wd-tabbar v-model="tabbar1">  
  <wd-tabbar-item name="home" title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="cart" title="分类" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item name="setting" title="设置" icon="setting"></wd-tabbar-item>  
  <wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>  
</wd-tabbar>

徽标提示

通过设置 value 属性,可以显示徽标提示,而设置 is-dot 属性后,会在图标右上角展示一个小红点。

<wd-tabbar v-model="tabbar5">  
  <wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>  
  <wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>  
  <wd-tabbar-item name="4" :value="200" title="最大值" icon="user"></wd-tabbar-item>  
</wd-tabbar>

悬浮标签栏

通过设置 shape 属性为 round,可以将标签栏设置为悬浮样式。

<wd-tabbar shape="round" v-model="tabbar2">  
  <wd-tabbar-item name="1" title="首页" is-dot :value="2" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" title="分类" :value="2" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item name="3" title="相册" :value="30" icon="photo"></wd-tabbar-item>  
  <wd-tabbar-item name="4" title="我的" :value="200" icon="user"></wd-tabbar-item>  
</wd-tabbar>

自定义图标

通过使用 <template #icon> 可以自定义标签页的图标。

<wd-tabbar v-model="tabbar4">  
  <wd-tabbar-item name="1" :value="2" title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类">  
    <template #icon>  
      <wd-img round height="40rpx" width="40rpx" src="https://unpkg.com/wot-design-uni-assets/panda.jpg"></wd-img>  
    </template>  
  </wd-tabbar-item>  
  <wd-tabbar-item name="3" :value="3" title="我的" icon="user"></wd-tabbar-item>  
</wd-tabbar>

自定义颜色

通过设置 active-colorinactive-color 属性,可以自定义激活和未激活标签的颜色。

<wd-tabbar v-model="tabbar5" active-color="#ee0a24" inactive-color="#7d7e80">  
  <wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>  
  <wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>  
  <wd-tabbar-item name="4" :value="200" title="最大值" icon="photo"></wd-tabbar-item>  
  <wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>  
</wd-tabbar>

监听切换事件

通过监听 change 事件,可以获取选中标签的值。

<wd-tabbar v-model="tabbar6" @change="handleChange1" active-color="#ee0a24" inactive-color="#7d7e80">  
  <wd-tabbar-item name="1" title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>  
  <wd-tabbar-item name="4" title="相册" icon="photo"></wd-tabbar-item>  
  <wd-tabbar-item name="5" title="客服" icon="chat"></wd-tabbar-item>  
</wd-tabbar>
function handleChange1({ value }: { value: string }) {  
  show(`选中标签:${value}`)  
}

固定底部

通过设置 fixed 属性,可以将标签栏固定在底部;通过设置 placeholder 属性,可以在固定在底部时在标签位置生成一个等高的占位元素。

<wd-tabbar fixed v-model="tabbar3" bordered safeAreaInsetBottom placeholder>  
  <wd-tabbar-item name="1" :value="2" is-dot title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>  
  <wd-tabbar-item name="4" :value="200" title="相册" icon="photo"></wd-tabbar-item>  
  <wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>  
</wd-tabbar>

Tabbar Attributes

参数 说明 类型 可选值 默认值 最低版本
v-model/modelValue 选中标签的索引值或者名称 number / string - 0 0.1.27
fixed 是否固定在底部 boolean - false 0.1.27
safeAreaInsetBottom 是否设置底部安全距离(iPhone X 类型的机型) boolean - false 0.1.27
bordered 是否显示顶部边框 boolean - true 0.1.27
shape 标签栏的形状 TabbarShape 'default' / 'round' 'default' 0.1.27
activeColor 激活标签的颜色 string - - 0.1.27
inactiveColor 未激活标签的颜色 string - - 0.1.27
placeholder 固定在底部时,是否在标签位置生成一个等高的占位元素 boolean - false 0.1.27
zIndex tabbar组件的层级 number - 500 0.1.27

Tabbar Events

事件名称 说明 参数 最低版本
change tabbar标签切换时触发 { value } 0.1.27

Tabbar 外部样式类

类名 说明 最低版本
custom-class 根节点样式类 0.1.27
custom-style 根节点样式 0.1.27

TabbarItem Attributes

参数 说明 类型 可选值 默认值 最低版本
title 标签页的标题 string - - 0.1.27
name 唯一标识符 string / number - - 0.1.27
icon 图标 string - - 0.1.27
value 徽标显示值 number / string - - 0.1.27
isDot 是否点状徽标 boolean - false 0.1.27
max 徽标最大值 number - 99 0.1.27

TabbarItem Slots

name 说明 参数 最低版本
icon 自定义图标 active: boolean 0.1.27

TabbarItem 外部样式类

类名 说明 最低版本
custom-class 根节点样式类 0.1.27
custom-style 根节点样式 0.1.27

地址

Github
文档网站
插件市场
QQ群

继续阅读 »

Tabbar 标签栏

底部导航栏,用于在不同页面之间进行切换。

何时使用

  • 需要定制底部导航栏时

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

v-model 为绑定值,表示选中标签的索引值或者名称。

<wd-tabbar v-model="tabbar1">  
  <wd-tabbar-item title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item title="分类" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item title="我的" icon="user"></wd-tabbar-item>  
</wd-tabbar>
import { ref } from 'vue'  

const tabbar1 = ref('home')

通过名称匹配

通过设置 name 属性,可以通过名称匹配选中标签。

<wd-tabbar v-model="tabbar1">  
  <wd-tabbar-item name="home" title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="cart" title="分类" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item name="setting" title="设置" icon="setting"></wd-tabbar-item>  
  <wd-tabbar-item name="user" title="我的" icon="user"></wd-tabbar-item>  
</wd-tabbar>

徽标提示

通过设置 value 属性,可以显示徽标提示,而设置 is-dot 属性后,会在图标右上角展示一个小红点。

<wd-tabbar v-model="tabbar5">  
  <wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>  
  <wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>  
  <wd-tabbar-item name="4" :value="200" title="最大值" icon="user"></wd-tabbar-item>  
</wd-tabbar>

悬浮标签栏

通过设置 shape 属性为 round,可以将标签栏设置为悬浮样式。

<wd-tabbar shape="round" v-model="tabbar2">  
  <wd-tabbar-item name="1" title="首页" is-dot :value="2" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" title="分类" :value="2" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item name="3" title="相册" :value="30" icon="photo"></wd-tabbar-item>  
  <wd-tabbar-item name="4" title="我的" :value="200" icon="user"></wd-tabbar-item>  
</wd-tabbar>

自定义图标

通过使用 <template #icon> 可以自定义标签页的图标。

<wd-tabbar v-model="tabbar4">  
  <wd-tabbar-item name="1" :value="2" title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类">  
    <template #icon>  
      <wd-img round height="40rpx" width="40rpx" src="https://unpkg.com/wot-design-uni-assets/panda.jpg"></wd-img>  
    </template>  
  </wd-tabbar-item>  
  <wd-tabbar-item name="3" :value="3" title="我的" icon="user"></wd-tabbar-item>  
</wd-tabbar>

自定义颜色

通过设置 active-colorinactive-color 属性,可以自定义激活和未激活标签的颜色。

<wd-tabbar v-model="tabbar5" active-color="#ee0a24" inactive-color="#7d7e80">  
  <wd-tabbar-item name="1" is-dot :value="2" title="点状" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" :value="2" icon="cart" title="分类"></wd-tabbar-item>  
  <wd-tabbar-item name="3" :value="30" title="我的" icon="user"></wd-tabbar-item>  
  <wd-tabbar-item name="4" :value="200" title="最大值" icon="photo"></wd-tabbar-item>  
  <wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>  
</wd-tabbar>

监听切换事件

通过监听 change 事件,可以获取选中标签的值。

<wd-tabbar v-model="tabbar6" @change="handleChange1" active-color="#ee0a24" inactive-color="#7d7e80">  
  <wd-tabbar-item name="1" title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>  
  <wd-tabbar-item name="4" title="相册" icon="photo"></wd-tabbar-item>  
  <wd-tabbar-item name="5" title="客服" icon="chat"></wd-tabbar-item>  
</wd-tabbar>
function handleChange1({ value }: { value: string }) {  
  show(`选中标签:${value}`)  
}

固定底部

通过设置 fixed 属性,可以将标签栏固定在底部;通过设置 placeholder 属性,可以在固定在底部时在标签位置生成一个等高的占位元素。

<wd-tabbar fixed v-model="tabbar3" bordered safeAreaInsetBottom placeholder>  
  <wd-tabbar-item name="1" :value="2" is-dot title="首页" icon="home"></wd-tabbar-item>  
  <wd-tabbar-item name="2" title="分类" icon="cart"></wd-tabbar-item>  
  <wd-tabbar-item name="3" title="我的" icon="user"></wd-tabbar-item>  
  <wd-tabbar-item name="4" :value="200" title="相册" icon="photo"></wd-tabbar-item>  
  <wd-tabbar-item name="5" :value="10" title="客服" icon="chat"></wd-tabbar-item>  
</wd-tabbar>

Tabbar Attributes

参数 说明 类型 可选值 默认值 最低版本
v-model/modelValue 选中标签的索引值或者名称 number / string - 0 0.1.27
fixed 是否固定在底部 boolean - false 0.1.27
safeAreaInsetBottom 是否设置底部安全距离(iPhone X 类型的机型) boolean - false 0.1.27
bordered 是否显示顶部边框 boolean - true 0.1.27
shape 标签栏的形状 TabbarShape 'default' / 'round' 'default' 0.1.27
activeColor 激活标签的颜色 string - - 0.1.27
inactiveColor 未激活标签的颜色 string - - 0.1.27
placeholder 固定在底部时,是否在标签位置生成一个等高的占位元素 boolean - false 0.1.27
zIndex tabbar组件的层级 number - 500 0.1.27

Tabbar Events

事件名称 说明 参数 最低版本
change tabbar标签切换时触发 { value } 0.1.27

Tabbar 外部样式类

类名 说明 最低版本
custom-class 根节点样式类 0.1.27
custom-style 根节点样式 0.1.27

TabbarItem Attributes

参数 说明 类型 可选值 默认值 最低版本
title 标签页的标题 string - - 0.1.27
name 唯一标识符 string / number - - 0.1.27
icon 图标 string - - 0.1.27
value 徽标显示值 number / string - - 0.1.27
isDot 是否点状徽标 boolean - false 0.1.27
max 徽标最大值 number - 99 0.1.27

TabbarItem Slots

name 说明 参数 最低版本
icon 自定义图标 active: boolean 0.1.27

TabbarItem 外部样式类

类名 说明 最低版本
custom-class 根节点样式类 0.1.27
custom-style 根节点样式 0.1.27

地址

Github
文档网站
插件市场
QQ群

收起阅读 »