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

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

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

根据左侧列表,联动跳右侧内容. 效果如图: wxml代码: <view class="page"> <!-- 左侧导航 --> <view class='tui-fixed-left'> <scroll-view class='tui-city-scroll' scroll-x="true" scroll-y="true" style='height:92%;' scroll-with-animation…

<!-- 搜索 --> <view class="search"> <input class="search-box" placeholder='痘研商城' bindtap='goodsName'></input> <image src="{{staticImg}}index/iconSearch.png" class='question-mark'></image> <…

由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使用的时候可以通过util 来引用 //p_c.js module.exports = { "province": [ { "title": "上海市", "weight": 1, "evaluation_value&qu…

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

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

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

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