
微信小程序
月影-前端
天道酬勤,学习中成长,互助互爱
展开
-
微信小程序之自定义组件
根据官方文档自定义组件一步一步来创建自定义组件第一步创建项目结构打开微信开发者工具创建一个项目,新建目录 components 与 pages 目录同级在components中新建一个目录circle在circle中新建 Component 命名为 circle 自动生成 json wxml wxss js 4个文件。结构如下:第二步编写组件编写json首先需要在 json 文件中进行自定义组件声...原创 2018-02-22 14:32:38 · 2091 阅读 · 0 评论 -
微信小程序之圆形进度条
需求概要小程序中使用圆形倒计时,效果图:思路使用2个canvas 一个是背景圆环,一个是彩色圆环。使用setInterval 让彩色圆环逐步绘制。解决方案第一步先写结构一个盒子包裹2个canvas以及文字盒子;盒子使用相对定位作为父级,flex布局,设置居中;一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg"另一个canvas,使用相对定位作为进度条,...原创 2018-02-22 14:49:59 · 12243 阅读 · 2 评论 -
微信小程序picker组件遇到的问题与解决方案
一、picker基本概念当然先看官方文档 picker说明搞清楚基本概念“从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。”几个主要属性:range: 选取范围,数据类型为Array / Object Array,mode为 普通选择器 时,range 有效;value: value 的值表示选择了 range 中的第几个(...原创 2018-02-22 14:53:59 · 12609 阅读 · 2 评论 -
微信小程序组件swiper结合模板的使用
微信小程序的swiper组件今天学习了微信小程序的swiper组件。参考官网template和swiper一、新建模板在组件文件夹components下新建一个模板文件swiper.wxml。template 使用name属性,作为模板的名字(模板的唯一标识符,使用时用is属性声明)。然后在<template/>内定义swiper代码片段 ,代码如下:<!--template s...原创 2018-02-22 14:55:08 · 1853 阅读 · 0 评论 -
微信小程序之判断页面滚动方向
需求微信小程序中如果判断页面滚动方向?解决方案1.用到微信小程序API获取页面实际高度 nodesRef.boundingClientRect([callback])监听用户滑动页面事件onPageScroll。2.获取页面实际高度<!--WXML--><view id="box"> <view class="list" wx:fo...原创 2018-08-31 15:23:00 · 2565 阅读 · 0 评论