微信小程序 - 随笔分类 - 金天黑日

微信小程序父元素设置overflow: hidden;导致<van-index-bar失去上下滑动效果

摘要：这是微信小程序中一个比较典型的布局冲突，其根源在于<van-index-bar>组件的滚动机制与父元素的CSS限制不兼容。 <van-index-bar>组件内部依赖wx.pageScrollTo这个微信小程序API来实现滚动到指定位置。这个API仅支持整个页面的滚动，无法在局部滚动容器内正常工作阅读全文

posted @ 2025-12-09 16:08 金天黑日阅读(20) 评论(0) 推荐(0)

<van-field格式为两位小数的数字

摘要：1 wxml <van-field value="{{ formdata.money }}" bind:change="moneyChange" type="number" placeholder="" border="{{ false }}" /> 2 js moneyChange(e){ var 阅读全文

posted @ 2025-12-05 15:57 金天黑日阅读(18) 评论(0) 推荐(0)

按钮固定在底部

摘要：1 wxml <view class="fixed-bottom-btn"> <view class="button" bindtap="goYuding">马上预定</view> </view> 2 wxss /* 固定在底部的按钮容器 */ .fixed-bottom-btn { positio 阅读全文

posted @ 2025-11-12 15:41 金天黑日阅读(9) 评论(0) 推荐(0)

微信小程序预览图片

摘要：1 官方文档网址 2 示例 wx.previewImage({ current: this.data.applyDetail.placeImgUrlList[1], // 当前显示图片的http链接 urls:this.data.applyDetail.placeImgUrlList// 需要预览阅读全文

posted @ 2025-10-31 14:23 金天黑日阅读(6) 评论(0) 推荐(0)

<van-uploader> 设置上传按钮的尺寸和预览图片的尺寸

摘要：1 说明 1.1 代码 <van-uploader file-list="{{ fileList }}" deletable="{{ true }}" max-count="10" multiple accept="image" max-size="5242880" preview-image="{ 阅读全文

posted @ 2025-10-27 15:04 金天黑日阅读(44) 评论(0) 推荐(0)

自定义组件中监听properties里面的属性的方法里面去取另外的properties里面的属性拿不到值的问题

摘要：1 properties 这里有两个属性 options和modelValue，对modelValue进行监听父组件两个属性都传了值 properties: { options: { // 选项数组 type: Array, value: [], }, modelValue: { // 默认选中的阅读全文

posted @ 2025-10-23 16:22 金天黑日阅读(5) 评论(0) 推荐(0)

微信小程序在vant框架的基础上自定义多选框

摘要：1 简介微信小程序官方和vant框架都没有提供很方便的多选框，所以自己定义一个组件配置说明 place：输入框提示 list：数组集合 listlabel：list中元素的key名称 listvalue：list中原始的value名称 defaultValue：默认选中的值 2 代码 selec 阅读全文

posted @ 2025-10-22 16:44 金天黑日阅读(113) 评论(0) 推荐(0)

微信小程序-自定义组件(vant-ui的基础上)-日期时间选择器

摘要：1 简介 vant虽然提供了日期时间选择器，但是非常不方便，需要写很多东西才能实现一个正常的日期时间选择，所以在这个基础上做一个封装 2 组件代码my-datepicker 1）wxml  <view> <view class= 阅读全文

posted @ 2025-10-22 14:48 金天黑日阅读(241) 评论(0) 推荐(0)

微信小程序-自定义组件-单选下拉框

摘要：转 https://blog.csdn.net/wcy0112/article/details/143368550 1 简介微信小程序没有下拉选择的组件所以只能自己写一个了。先看效果 2 组件说明功能类似 element-ui 的 el-select 【根据 value 去匹配 label 回阅读全文

posted @ 2025-10-22 12:37 金天黑日阅读(319) 评论(0) 推荐(0)

微信小程序使用formdata采用multipart方式上传文件

摘要：参考：https://juejin.cn/post/7220769136209051703 1 简介在微信原生小程序中，对于上传文件（图片，文件，语音，视频）都有自己的api最后使用wx.uploadFile上传到服务器。但是微信原生小程序中没有 fromdata对象，没办法直接使用Fromda 阅读全文

posted @ 2025-10-21 10:50 金天黑日阅读(277) 评论(0) 推荐(0)

微信小程序图片分区域点击事件

摘要：1 说明基本思路是把图片划分为多个区域，点击图片的时候获取到坐标，判断是否在指定的区域内 2 划分图片区域 2.1 采集图片坐标的工具 2.1.1 网址 2.2.2 说明这个网址可以上传图片，然后用多个点画区域，获取到这些点的坐标 2.2.3 示例 1）第一步：上传图片 2）第二部：在下方去操作阅读全文

posted @ 2025-10-13 16:24 金天黑日阅读(96) 评论(0) 推荐(0)

微信小程序使用地图map 实现定位和实时绘画轨迹

摘要：1 文档官方文档 api文档 2 准备工作 2.1 注册开发者 1）进入腾讯位置服务官网地址 2）注册注册号之后，这个key是需要用到的 2.2 开通地图服务 1）进入微信公众平台-账号设置-第三方设置-插件管理 2）添加需要的插件 2.3 服务器域名配置 1）微信公众平台-开发管理-开发设置阅读全文

posted @ 2025-09-26 16:01 金天黑日阅读(431) 评论(0) 推荐(0)

微信小程序<van-uploader上传图片

摘要：1 简介采用的时有赞的组件采用的模式是把图片转换成base64，随其它数据一起提交到后台 2 小程序端编码(新增) 2.1 json文件引入组件 "van-uploader": "@vant/weapp/uploader/index", 完整的 { "navigationBarTitleTex 阅读全文

posted @ 2025-09-25 14:12 金天黑日阅读(152) 评论(0) 推荐(0)

微信小程序商品规则选择样式

摘要：1 效果 2 wxml <view class="sku-container"> <view class="sku"> <view class="items"> <text class="active" bindtap="additionSelect">hahaha</text> <text cla 阅读全文

posted @ 2025-09-05 15:59 金天黑日阅读(12) 评论(0) 推荐(0)

关于forEach中返回的问题

摘要：1 简介如下，在foreach中遍历，如果key=c则返回false 本以为遍历到c时就会结束遍历返回false，实际上全部遍历完了，返回了true 在 JavaScript 中，使用 forEach 方法遍历数组时，如果在函数内部使用 return 语句，它只会跳出当前的循环，而不会跳出整个函数阅读全文

posted @ 2025-09-05 13:17 金天黑日阅读(10) 评论(0) 推荐(0)

微信小程序 van-field 调整高度

摘要：1 简介在写表单的时候，下载外面写了一个view来展示一个输入框，然后在下面添加了<van-field>文本框，但是去点击的时候，发现点击蓝色框住的部分是没有反应的，只有上面一块可以点击输入猜想是<van-field>的默认高度就那么一点 <view class="search-textare 阅读全文

posted @ 2025-09-05 12:12 金天黑日阅读(218) 评论(0) 推荐(0)

关于<van-col>下面的文本自动换行

摘要：1 代码 <van-row> <van-col span="4" > <view class="item-name"> <text decode="{{true}}"> 地点:</text> </view> </van-col> <van-col span="18" > <view class="i 阅读全文

posted @ 2025-09-01 16:28 金天黑日阅读(28) 评论(0) 推荐(0)

微信小程序表单必填红色星号

摘要：1 样式因为不好调文字对齐，所以非必填也弄个星号-黑色的 /* 必填 */ .require-label:before { content: '* '; color: red; } /* 非必填 */ .notrequire-label:before { content: '* '; color: 阅读全文

posted @ 2025-08-29 14:09 金天黑日阅读(40) 评论(0) 推荐(0)

bandtap 绑定点击事件

摘要：1 简介 bindtap是微信小程序中用于绑定点击事件的属性，其核心作用是将用户点击组件的行为与逻辑层代码关联起来 2 基础用法在WXML文件中，通过bindtap="函数名"的方式绑定点击事件。 <view id="tapTest" data-hi="WeChat" bindtap="tapNa 阅读全文

posted @ 2025-08-28 14:27 金天黑日阅读(20) 评论(0) 推荐(0)

微信小程序订阅消息

摘要：1 简介小程序的订阅消息分为两种：一次性订阅和永久订阅。一次性订阅：订阅一次，可发送一次消息。一次调用最多可订阅3个不同订阅消息。永久订阅：用户订阅一次后，开发者可长期下发多条消息。目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放。我们小程序只能申请一次性订阅。 2 阅读全文

posted @ 2025-08-27 13:53 金天黑日阅读(260) 评论(0) 推荐(0)

随笔分类 - 微信小程序