- 博客(28)
- 收藏
- 关注
RSS订阅
原创 小程序视频列表同时只能播放一个
<view class="box"> <view class="row" wx:for="{{videoList}}" wx:key="index" > <view class="cover"> <video src="{{item.url}}" id="{{index}}" bindplay="playVideo" ></video> </view> </view&.
2021-12-03 11:32:25
1808
原创 正则表达式匹配规则
匹配中文: [\u4e00-\u9fa5]英文字母: [a-zA-Z]数字: [0-9]匹配中文，英文字母和数字及_: ^[\u4e00-\u9fa5_a-zA-Z0-9]+$匹配手机号如下：var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/; if (!myreg.test(mobile)) { wx.showToast({ title: ...
2021-11-17 15:25:19
88
原创 微信小程序 boundingClientRect 获取元素节点位置
微信小程序获取页面元素位置的方法如下：wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐标 rect.top // 节点的上边界坐标 ...
2021-10-18 10:22:31
7427
原创 微信小程序里面的绝对路径和相对路径
相对路径分析： “../”代表当前文件所在目录的上一级目录。 “../../”代表当前文件所在目录的上上级目录。 “../../../”可以依次类推。绝对路径分析： “/”代表根目录
2021-10-14 11:42:40
915
原创 微信小程序分享功能的实现
第一种：在page.js中实现onShareAppMessage，便可在小程序右上角选择分享该页面onShareAppMessage: function () { return { title: '弹出分享时显示的分享标题', desc: '分享页面的内容', path: '/page/share?id=123' // 路径，传递参数到指定页面。 }}第二种:自定义按钮实现分享在页面写一个button组件<butt
2021-10-14 11:35:45
4701
原创 小程序瀑布流的实现三种方式
实现思路：把图片分成两排，创建两个数组，计算总数组中图片的宽高，对比上一个图片和当前的图片高度，低的就给另一个数组添加。效果图：第一种：如果后端返回了图片高度处理过程如下：js:Page({ data:{ list:[], vList:[], v2List:[] }, onLoad: function (options) { this.photoDetails(); }, photoDet.
2021-10-14 11:27:19
3415
2
原创 【自定义组件】内部执行顺序问题分析
第一步：创建组件：created: function () {} 第二步：属性默认值设置：如果组件被调用时设置了组件属性，则初始化该属性的默认值。没有调用的属性不执行。比如自定义组件user含有二个属性，分别是： memberName、memberSex调用该组件时，只赋值了memberName，未赋值memberSex时，则只会执行memberName属性的observer函数，未赋值的memberSex属性的observer函数不会被执行。<!-- 调用组件，以下只
2021-10-14 10:42:06
180
原创 小程序里面组件和页面之间的相互调用
第一种：通过组件去调用页面里面的方法执行过程：已mine.wxml页面和minelogot.wxml页面为例1、在mine.json中引入该组件：{ "usingComponents": { "minelogot":"/components/minelogot/minelogot" }, "navigationBarTitleText": "我的"}2、在mine.wxml中使用minelogot组件:<view> <minelogot id
2021-10-14 10:17:48
700
原创 小程序富文本解析
一共有两种方法：第一种：使用小程序组件rich-textwxml: <view class="neirong"> <rich-text nodes="{{detail.content}}"></rich-text> </view>js:Page({ data: { detail:'' }, onLoad: function (options) { this.getDeta
2021-10-14 09:42:00
358
原创 小程序官方image组件
图片裁剪形式：Bug & Tiptip：image组件默认宽度320px、高度240px tip：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
2021-10-13 16:47:09
98
原创 小程序实现---进入页面倒计时（3s）
实现效果：wxml: <view class="countdown" >{{second}}s 进入</view>wxss:.countdown{ position: absolute; top: 33rpx; right: 37rpx; width: 130rpx; height: 60rpx; line-height: 60rpx; text-align:center; background.
2021-10-13 16:31:09
727
原创 小程序--------隐藏横向滚动条
::-webkit-scrollbar { width: 0; height: 0; color: transparent;}
2021-09-15 14:03:36
211
原创 小程序------点击滚动到目标指定区域
SelectorQuerywx.createSelectorQuery()基础库 1.4.0 开始支持，低版本需做兼容处理。以Promise 风格调用：不支持小程序插件：支持，需要小程序基础库版本不低于1.9.6返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用this.createSelectorQuery()来代替。返回值SelectorQuery示例代码const query = wx.createSel...
2021-09-15 12:59:07
284
原创 js报错-----Uncaught TypeError: Cannot read property ‘split‘ of null
srt="aa.png,bb.png,cc.png"var name = srt.split(",");刚开始以为是js文件引入的问题，还将双引号改成了单引号试了试，可是还是不行，在控制台输出str的值后，最后发现，是因为遍历字符串str的时候，发现第一次会得到一个空值，因此报错了。解决方法如下：在使用split方法前，先对字符串str进行判断即可if(str){ var name = srt.split(",");}...
2021-09-14 12:45:42
587
原创 小程序-------------修改轮播图点
.banners .wx-swiper-dots.wx-swiper-dots-horizontal{ margin-bottom: 2rpx;}.banners .wx-swiper-dot{ width:24rpx; display: inline-flex; height: 6rpx; margin-left: 7rpx; justify-content:space-between;}.banners .wx-swiper-dot::before{ .
2021-09-10 16:13:05
77
原创 小程序--------调用高德地图天气api获取天气
一、使用高德天气接口：网址链接为：https://lbs.amap.com/api/webservice/guide/api/weatherinfo（一）注册并获取Key使用时候需要注册获取Key，因为是阿里旗下公司，可以使用支付宝扫码注册。注册后在图中所示的页面中点击 申请Key：在打开的页面中点击右上角的“创建新应用”，填写应用名称和类型，我这里随便把应用名称定为Weather，创建好之后点击“添加”可以给Key添加名字，服务平台注意要选择 Web服务，这个选项才能使用天气查询AP
2021-09-09 13:12:19
1868
原创 css-----取消a标签在移动端点击时的蓝色以及input标签
a { color: #333; outline: none; text-decoration: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; }.
2021-09-08 12:46:30
467
原创 css---------通用小程序、uniapp的css全局样式
代码如下：page { height: 100%; font-size: 11pt; color: #555; background: #efeff4; overflow-x: hidden;}page,block,view,scroll-view,swiper,movable-view,icon,text,progress,button,checkbox,form,input,label,picker,picker-view,radio,slider,s
2021-08-26 16:36:45
522
原创 uniapp---------订单多商品评价及图片上传、删除功能
效果图如下：前端代码如下：<template> <view id="orderPj"> <view class="Box" v-for="(items,i) in info" :key="i" style="background-color: #fff;margin-bottom: 20rpx;"> <view class="goodsBox" > <image :src="items.pic" mode=.
2021-08-26 16:17:31
1289
1
原创 uniapp------添加历史搜索及去重
效果如图： <view class="search"> <input type="text" placeholder="搜索您需要的内容" :value="keyword" @input="input" @confirm="search"/> <image src="../../static/sousuo.png" class="icon-search"></image></view><h2>搜
2021-08-26 09:07:27
371
原创 怎么样给tr添加下边框
怎么样给tr添加下边框直接给tr标签添加如下代码：在这里插入代码片tr {border-bottom: 1px solid #ccc;}运行后发现，表格没有变化。思考后才知道，表格table有一个默认属性border-collapse。参数如：1.* separate* 默认值。边框会被分开。不会忽略border-spacing 和 empty-cells 属性。该默认属性如下：2.* collapse* 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 em
2020-12-28 16:15:37
2209
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人