本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能。分享给大家供大家参考，具体如下： 声明 bug： 页面顶部分类【汽车服务、汽车销售等】列表和页脚的详细地址在真机测试是会出现不显示问题？ 造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！ 解决办法：将该文本视图采用cover-view，放在map中。 感谢： 感谢Lrj_estranged指出问题！ 效果图实现方法 1. 地图...
本文实例讲述了微信小程序map组件结合高德地图API实现wx.chooseLocation功能。分享给大家供大家参考，具体如下： 声明 bug： 页面搜索返回的列表在真机测试是会出现不显示问题？ 造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！ 解决办法：将该文本视图采用cover-view，放在map中。 感谢： 感谢Lrj_estranged指出问题！ 效果图实现原理通过高德地图的微信小程序开发API（getI...
本文实例讲述了微信小程序MUI侧滑导航菜单。分享给大家供大家参考，具体如下： 实现的目标—-YDUI的Popup组件点击列表图标—-左侧的菜单栏显示—-点击关闭按钮或者右侧的遮罩层—-左侧菜单栏关闭实现方案1：左侧菜单和右侧展示页面分为上下两层wxml <view class="page"><----下层左侧导航---><view class="page-bottom"><view class="page-content"><view bindtap="open_list" wx:for-items="{{nav_list}}" class="page-list"><tex...
本文实例讲述了微信小程序MUI侧滑导航菜单。分享给大家供大家参考，具体如下： 实现的目标MUI的off canvas效果点击列表 —- 右侧展示页面不动，左侧导航滑动 —- 点击右侧遮罩层或者左侧选项 —- 左侧还原，右侧去掉遮罩层实现方案2：左右分上下两层，左侧滑动，右侧不动 WXML <view class="page"><view class="page-top {{open ? page-top-show : }}"><view class="nav-list" wx:for-items="{{nav_list}}" bindtap="open_list" ...
本文实例讲述了微信小程序MUI导航栏透明渐变功能。分享给大家供大家参考，具体如下： 导航栏透明渐变效果实现原理 1. 利用position:absolute在导航下定位一个view作为背景渐变使用; 2. 通过改变改view的opacity来实现透明渐变。 WXML <!--pages/scroll/scroll.wxml--> <view style="height:100%;position:fixed;width:100%;"><scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;"><view class="page-group"><v...
本文实例讲述了微信小程序MUI导航栏透明渐变功能。分享给大家供大家参考，具体如下： 导航栏透明渐变效果实现原理 1. 给page-group设置的背景颜色采用rgba; 2. 通过改变rgba其中a的值来实现透明渐变。 WXML <view style="height:100%;position:fixed;width:100%;"><scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;"><!-- 改变位置，去掉多余的view，直接改变背景色的透明度实现透明渐变 --><view class="pa...
引言：在微信小程序里，比如商品展示页面的商品详情会有图片展示，PC端设置的商品详情是PC端的宽度，所以在小程序里图片会显示不全，这时就应该做相应的处理，使小程序里图片显示正确思路 把图片的宽度改为手机屏幕对应的宽度微信小程序需要知道的知识 需要知道微信小程序里有自己的宽度标准，单位为rpx；针对所有不同尺寸的浏览器，微信小程序里规定屏幕宽为750rpx；解决WXML<view class=html_detail><rich-text nodes={{artical}...
本文实例讲述了微信小程序实现基于三元运算验证手机号/姓名功能。分享给大家供大家参考，具体如下： wxml部分： <view class="fl_form" style="position:relative;padding-top:20rpx;"><text><text style="color:red;padding-right:10rpx">*</text>您的姓名</text><input type="text" placeholder=请输入您的姓名 value="{{trueName}}" bindblur=userNameInput></input><text class="{{isName==1?show:hidden}}">姓名不能为空</tex...
本文实例讲述了微信小程序实现提交input信息到后台的方法。分享给大家供大家参考，具体如下： wxml文件： <!-- 用户名事件绑定 --> <view class="fl_form"> <text>您的姓名</text> <input type="text" placeholder=请输入您的姓名 value="{{userName}}" bindblur=userNameInput></input> </view> <!-- 所属部门事件绑定 --> <view class="fl_form"> <text>所属部门</text> <input type="text" placeholder=请输入所属部门 value="{...
本文实例讲述了微信小程序实现分享朋友圈的图片功能。分享给大家供大家参考，具体如下： 由于微信小程序只支持分享给朋友或者群，不支持分享到朋友圈，又有分享到朋友圈这个需求，那就要想办法实现这个需求。查阅各种资料，发现基本思路有两种，一种是后端实现，另一种是前端实现，后端实现的方式这里就不讨论了，因为我是不懂后端的，只会前端的东西，所以这里就记录一下前端的实现方法。 前端要实现分享到朋友群，都是通过canvas...
本文实例讲述了微信小程序时间轴实现方法。分享给大家供大家参考，具体如下： 最近项目需要在页面上做一个时间轴，又是第一次做，而且还是在小程序上，要知道小程序里面没有ol/ul/li，看了好几个例子，最后做出来了，开心呀！如图：做起来其实很简单：一个时间轴包括一个圆圈（css实现圆圈或者找一个圆圈图片）+一条线（css实现直线或者找一个直线的图片)+内容 来看我的代码（代码很不规范，请忽略）： wxml <view class=weui-cell...
本文实例讲述了微信小程序外卖选购页实现切换分类与数量加减功能。分享给大家供大家参考，具体如下： 关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤： 效果图实现以下功能 一、 点击分类项，切换右边的食品，并高亮自身 这个实现比较简单，给一个states数组，用于记录每一项分类的状态，点击设为true，wxml渲染时三目运算判断即可。 categoryStates = categoryStates.map(function (item, i) { if (index == i) {...
本文实例讲述了微信小程序实现多选删除列表数据功能。分享给大家供大家参考，具体如下： 实现小程序一个类似多选列表删除的功能 <!-- 错题本 --> <view class="contarner"><view class="content"><view class="title flex-def flex-cCenter flex-zBetween"><view>错题本(<text>{{list.length}}</text>)题</view><view class="editBtn" bindtap="showSelIcon">{{iconStatu?取消:编辑}}</view></view><view class="{{iconStatu?margi...
本文实例讲述了微信小程序出现wx.getLocation再次授权问题的解决方法。分享给大家供大家参考，具体如下： 首先，在page外定义一个公共函数用于发送获取位置的请求 var getLocation = function (that) {wx.getLocation({type: wgs84,success: function (res) {// 经纬度var latitude = res.latitudevar longitude = res.longitudevar aK = that.data.aKwx.request({url: https://api.map.baidu.com/geocoder/v2/?ak= + aK + &locati...
关于微信小程序的scroll-view组件，第一次写的时候是直接在scroll-view中用了一层容器包裹子元素，然后用了flex布局，并且是用了组件来实现的横向滚动，后面有提出改进，但是不记录下，就发现过了几天，就有点懵了 1.效果图2.在scroll-view里加一层容器，使用flex布局实现 这里用flex布局实现的话，就要用组件的形式 wxss文件 .scrollView{padding: 0 20rpx;white-space: nowrap;box-sizing: border-box; } .item{display: inline-...