github项目地址   https://github.com/z1511676208/chooseAddr 序:项目中需要用到三级联动,自己试着写了下,也查了一些资料,现在把这个记录一下,里面地区数据,可根据个人需要做一些更改,我比较懒就不改了. wxml <!--index.wxml--> <view class="infoText">{{province}} {{city}} {{county}}</view> <view class=&

微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelector https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 在网上也找了资料,代码都太繁琐,并且对于频繁变化的数据,非常不好维护: 代码在git上有:https://github.com/jonyellow/co

这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动.表头或下面数据部分横向滑动的时候,两部分可以进行联动 具体效果像这样(随便写的丑样式布局) 说说原理,主要是使用两个scroll-view组件,然后监听两个scroll-view的滑动事件,然后根据滑动的scroll-view横向滑动的距离,通过scroll-left来设置另一个scroll-view滑动的距离 首先WXML代码: <scroll-view style='width:

picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需求,需要使用省市2级联动选择器,由于官方默认提供的是省市区3级联动选择器,所以自己封装了一个2级选择器 wxml文件 <view class="section"> <view class="section__title">省市二级联动demo&l

wxml文件 <video id='myvideo' src='你的视频文件路径'> </video> js文件 onLoad: function (options) { var videoContext = wx.createVideoContext('myvideo', this); videoContext.requestFullScreen();//执行全屏方法 }, 这个时候使用手机测试,在打开此页面的时候video便会默认横屏

1.清除button的默认样式 button::after{border:none;}input{outline:none;border:none;list-style: none;}

前几天开发微信小程序,其中有个需要联动宣传的业务,就是正在开发的小程序跳转到别的小程序去, 然后去看了下大家的做法与看法,总结下这小程序跳转之间应该注意到的几个问题 首先是跳转的方法, https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html 找个地方看直播 在你需要的地方绑定事件,这里跳转的是斗鱼TV小程序,做一个示范: Go(

今天一个活动要写个H5,明天一个功能要用小程序,天天都在写bug.用户反馈小程序用起来有问题还特么还不知道到底出了啥bug,反馈多了,老板要扣工资了!看来挖了太多坑不填也不行,程序异常还是要主动追踪,今天给大家介绍一个轻量级的错误日志监控服务Fundebug. Fundebug的小程序监控插件接入简单,只需要下载相应的插件文件,然后在app.js文件中引入并配置apikey即可.唯一要注意的就是微信需要设置request合法域名这一点不能忘记了. 1. 创建微信小程序监控项目 需要注册账号,点击

微信小程序swiper默认高度375rpx,一旦超过这高度,就滑动不到内容了,我们利用css3可以很简单做到这件事情 原理: 利用css3 横轴滚动属性overflow:scroll,设置死swiper高度为100vh,这时会产生css3滚动条,隐藏掉swiper-item::-webkit-scrollbar 即可. 详情示例见:https://www.cnblogs.com/cisum/p/10443412.html 1 swiper { 2 width: 100%; 3 height: 1

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

微信小程序练习笔记 微信小程序的练习笔记,用来整理思路的,文档持续更新中... 案例一:实现行的删除和增加操作  test.js // 当我们在特定方法中创建对象或者定义变量给与初始值的时候,它是局部的,是无法被其他方法所使用的 // 初始数据赋值 var initData = "this is first line\n this is second line" var listData = []; Page({ // 初始数据复制 data: { text: initData },

小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 定义布局:display:flex flex容器的属性: 一.flex-direction:排列方向 二.flex-wrap:换行规则 三.justify-content:对齐方式 四.order:成员之间的显示顺序 五.flex:成员所占屏幕的比例 一.flex-direction:排列方向 [默认]row:从左到右行排序 row-reverse:从右到左行排序 colomn:从上到下列

这个是微信小程序的picker-view组件,开发的省市区3级联动,体验还不错,就分享给大家了, 此版本的省市区数据为本地JS数据,免去请求加载数据了,大家直接看源码,先看下面的动图:   项目地址:https://github.com/pannysp/cityarea-wechat

最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils文件夹存入arealist.js文件,内容为: const areaList=[ { name:'河南', id:, parentId: },{ name:'浙江', id:, parentId: },{ name:'郑州', id:, parentId: },{ name:'新乡', id:, p

最近呢刚好做了一个省市联动的功能,今天看到有人问这个怎么做,我就把我做的放上来共享一下: 首先呢,来看看效果,点击文字'点击',弹出选择窗口,点击取消或者确定(取消.确定按钮在选择框上边,截图有些不清楚),窗口下滑, 做这个我用的是picker-view这个组件,现在来看一看picker-view的属性: 现在开始写wxml的代码,对了,插一句,我这里是把它写成一个模板的,先看看目录结构 我们先来看看cascade.wxml里的代码: <template name="cascade&quo

本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示:   商品属性联动.gif 代码示例 1.commodity.xml <!-- <view class="title">属性值联动选择</view> --> <!--options--> <view class="commodity_attr_list"> <!--每组属性--> <

微信小程序中的多级联动 这里用到的案例是城市选择器 先上代码: .wxml <view class="{{boxHide}}"> <view>{{nian}}--{{yue}}--{{ri}}</view> <view class="btn-background"><button bindtap="cancelPick">隐藏</button><button bindt

上一篇讲解了左=>右联动,那个还比较简单,本篇写剩下比较核心的部分,也是本次开发过程中遇到最难的部分,右=>左联动,先简单看一下演示   右左联动.gif 一.关键技术: (1) 小程序 wxss 中使用 rpx,而 js 中 scrollTop 获取到的值是 px,所以存在rpx 转 px 的问题.以 iPhone6 为基准,转换公式: // percent 为当前设备1rpx对应的px值 var percent = res.windowWidth / 750; 详情参考:WXSS尺寸单位

写在前面: 从2016年张小龙发布微信小程序这种新的形态,到2017年小程序的不温不火,再到今年小程序的大爆发,从一度刷爆朋友圈的‘头脑王者’,再到春节聚会坐在一起的火爆小游戏“跳一跳",都预示着张小龙以及团队当初的布局是成功的,让用户在原生APP和网页之外又有一种新形式的选择,随着微信自家的推广以及得益于小程序本身的”短小精悍,用完即走“的特性,同时再加上各家公司的努力跟进,小程序的未来不可限量,博主从小程序发布到现在的每次微信公开课都在关注,着实感觉到小程序的功能的日益强大,再加上最近博主最

复选框: 闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的: 需要的是这样的: 示例代码: /*复选框外框样式*/ checkbox .wx-checkbox-input { width: 40rpx; height: 40rpx; border: 4rpx solid #999; border-radius: 100%; } /*复选框外框选中样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked { bor

在页面上要加入一个悬浮的按钮,这个按钮需要可以拖动,在元素中使用catchtouchstart,catchtouchmove,catchtouchend来控制悬浮按钮的拖动,但是在ios系统中,微信小程序的页面会有个默认的下拉和上滑动画,这时只需要将该页面的json文件中加入 "disableScroll": true   就可以了