微信小程序

详解微信小程序开发之下拉刷新 上拉加载

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑... »

微信小程序教程之本地图片上传(leancloud)实例详解

微信小程序 leancloud ——本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下。 »

微信小程序 实现拖拽事件监听实例详解

微信小程序 拖拽监听功能:         在软件开发或者 APP应用开发的时候,经常会遇到拖拽监听,最近自己学习微信小程序的知识,就想实现这样的拖拽效果,这里就记录下。 需要做个浮在scroll-view之上的button.尝试了一下. 上GIF: Android中也会有类似移动控件的操作.思路差不多.获取到位移的X... »

微信小程序 使用picker封装省市区三级联动实例代码

 微信小程序 使用picker封装省市区三级联动实例   目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用。目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的。那么我的思路是这样的: 1、使用template模板语法进行封装,数据从页面传入 2、... »

微信小程序实现按字母排列选择城市功能

微信小程序实现按字母排列选择城市功能

实现效果预览 实现思想 利用小程序腾讯地图将所有城市查出来,并将其渲染至页面(https://lbs.qq.com/qqmap_wx_jssdk/index.html)(其中字母栏也根据获取到的数据变化) 其中涉及三个交互(点击字母时滚动到相应位置;滑动触摸字母时,需滚动到相应位置,并有当前哪个字母的提示,且有震动感;手动滑动页面时,需将当前对应的字母选中) 滑动触摸字母时,首先要得到所有字母所在... »

解决微信小程序中的滚动穿透问题

解决微信小程序中的滚动穿透问题

Mask-Scroll > 原码地址 * 蒙层防穿透问题 > 蒙层穿透就是,当你用fixed 布局让蒙层显示的时候, 手指滑动屏幕会出现底部内容也滑动的现象. 如图: 当蒙层出现的时候,你滚动屏幕,底部内容也一起跟着滚动。 这就是蒙层穿透, 也可以叫 ‘滚动穿透’. 当然出现这种情况, 用户体验当然是不好的了。 所以作为一个有点追求的工程师当然是不允许这种情况的... »

微信小程序左右滑动的实现代码

微信小程序左右滑动的实现代码

左滑 右滑 你不再是一个人无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题,探探能帮你解决。对于一个刚入小程序坑的妹子来说,没有大神指点不知道要在这里面的逻辑坑还要绕多久才能绕出来。 »

微信小程序实现图片预加载组件

微信小程序实现图片预加载组件

网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。的文字及一个按钮,点击按钮后文字会变成 Hello MINA! »

微信小程序 详解下拉加载与上拉刷新实现方法

微信小程序 详解下拉加载与上拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法 实现效果图: 方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新 首先要在json文件里设置window属性             属性   类型             &... »

这里写图片描述

微信小程序 摇一摇抽奖简单实例实现代码

微信小程序 摇一摇抽奖 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录。 首先看下根目录下的app.json的文件,可以看到在”pages”的数组里,里面配置了每个界面,且包含了每个界面文件的目录   我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件。 ... »

微信小程序 小程序制作及动画(animation样式)详解

微信小程序 小程序制作及动画(animation样式)详解

微信小程序制作实现效果图:微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受。最后,下载微信小程序开发工具。在介绍这个文章前,假设用户都已看过微信小程序的相关文档。 »

微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了… 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: ... »

微信小程序button标签open-type属性原理解析

微信小程序button标签open-type属性原理解析

这篇文章主要介绍了微信小程序button标签open-type属性原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 open-type (微信开放能力):合法值中的其中之一: getUserInfo说明:引导用户授权 而获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 而按钮的bindgetuserinfo属性 说明:... »

微信小程序如何通过用户授权获取手机号(getPhoneNumber)

微信小程序如何通过用户授权获取手机号(getPhoneNumber)

这篇文章主要介绍了微信小程序如何通过用户授权获取手机号(getPhoneNumber),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如getPhoneNu... »

微信小程序如何实现精确的日期时间选择器

微信小程序如何实现精确的日期时间选择器

效果图实现原理利用微信小程序的picker组件的多列选择器实现! »

微信小程序如何实现点击图片放大功能

这篇文章主要介绍了微信小程序如何实现点击图片放大功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下WXML: WXSS:.imgList.imgList .imgList-li.imgList .imgList-li .img »

微信小程序修改checkbox的样式代码实例

微信小程序修改checkbox的样式代码实例

这篇文章主要介绍了微信小程序修改checkbox的样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 修改前: 修改后: wxml代码: <checkbox class="checkbox" /> wxss代码: /* checkbox选中钱样式 */ checkbox{ transform: scale(0.7,0.7); ... »

微信小程序全选多选效果实现代码解析

微信小程序全选多选效果实现代码解析

这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="memberList"> <view class="allSelect_box" bindtap='selectAll'> <checkbox class="chec... »

微信小程序开发中var that =this的用法详解

微信小程序开发中var that =this的用法详解

在微信小程序开发中,var that =this的声明很常见。示例代码1 //index.js Page在代码中第9行声明了var that =this;第17行使用了that。如果不声明var that =this,且that改成this,代码如下!这跟this关键字的作用域有关! »

微信小程序实现二维码签到考勤系统

一。手动生成二维码的.js代码 这里要引入一个官方文档wxapp.qrcode.min.js let drawQrcode = require('../utils/wxapp.qrcode.min.js');//引入wxapp.qrcode.min.js文件 createQRcode(canvasWidth, canvasHeight, canvasId, url) { // 调用qrcode.j... »

微信小程序 欢迎页面的制作(源码下载)

微信小程序 欢迎页面的制作(源码下载)

微信小程序欢迎页面: 先看下最后的效果图:  首先打开开发工具,创建quick start项目,简单的修改一下。  把Index文件夹重命名为welcome; 底部的hello world改为一个类似于按钮的样式; 添加背景颜色; 修改顶部样式; 按钮的实现: welcome.wxml <view class="usermotto"> <text class=... »

微信小程序点击view动态添加样式过程解析

微信小程序点击view动态添加样式过程解析

这篇文章主要介绍了微信小程序点击view动态添加样式过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 基本逻辑: 1.给每个view自定义dataIndex属性,从0开始 2.自定义一个名为selected的class,作为被选中后的样式 3.在wx.js中给viewId属性赋为0,用于默认显示。 4.给每个view添加一个点击事件sele... »

微信小程序如何实现radio单选框单击打勾和取消

前端使用input 来写radio,小程序使用radio标签 也可以使用<radio />单标签 1.自定义radio样式、 wx默认的是真的丑 /* 单选框样式 */ /* 初始样式 */ radio .wx-radio-input{ width: 32rpx; height: 32rpx; border-radius: 0 } /* 选中后的 背景样式 ( 背景 边框 ) */ r... »

在这里插入图片描述

微信小程序仿淘宝热搜词在搜索框中轮播功能

摘要 逛淘宝的时候,发现淘宝搜索框中一直在垂直方向上轮播热搜提示词,觉得这是个不错的设计,除了能让空间更充分使用,也能让页面更有动感,最重要的是能够增加搜索框的使用频率。就在小程序中试着实现实现。 效果 体验 实现思路 思路比较简单,主要是两点, 1:input处于热搜提示词上层,用z-index实现 2:热搜词轮播用swiper实现,方向为vertical 3:在input聚焦时获取swiper... »

在这里插入图片描述

微信小程序swiper实现文字纵向轮播提示效果

摘要 小程序顶部总会看到滚动的通知栏,一般单条的都会用跑马灯去实现,但面对多条的内容,就需要用轮播去实现,轮播自然是swiper了,查了查,还真有vertical这个属性,swiper真好用。 效果 体验 代码 wxml <view class="swiper-view"> <swiper class="swiper_container" vertical="true" auto... »

Page 1 of 74123»