本文实例讲述了微信小程序实现的动态设置导航栏标题功能。分享给大家供大家参考，具体如下： 场景 当从一个分类列表页面进入到一个详情页面的时候，由于这个详情页面是公用的，为了区分页面，就会设置该页面的导航用以区分。就需要开发者在页面加载的时候进行动态设置导航标题！ 实现API wx.setNavigationBarTitle(OBJECT) 语法 wx.setNavigationBarTitle({title: 当前页面, //页面标题success: () => {}, //接口调用成功的回调函...
本文实例讲述了微信小程序常用简易小函数。分享给大家供大家参考，具体如下： 最近一直在写微信小程序，而且由于是第二次写了，所以针对很多通用的情况封装了一些函数，建议你们放在app.js中，方便全局去调用。 提示类函数 微信有一种原生的API用于显示提示类结果的wx.showToast，而且其中的图片是可以自定义的，所以为了保证全部一致性，而且方便调用，所以我将其全部封装在了app.js中： // 成功 showSuccess: function (message)...
本文实例为大家分享了微信小程序实现顶部导航的具体代码，供大家参考，具体内容如下 之前Android开发时，顶部导航用到viewPage，微信小程序里想要达到同样的效果，可用swiper来实现，先看效果图上代码： 1.swiperTab.js Page({data: {// tab切换 currentTab: 0,},swichNav: function (e) {console.log(e);var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab...
一、前言 做复杂的小程序就与web页面的区别原来越小了，一些web页面的功能会被要求添加到微信小程序页面中。 二、功能 页面在滑动的时候顶部页面导航跟随滑动，当点击导航中的任意一项时返回页面顶部。 三、实现 wxml代码： <view class=container> <view class=navigation {{pageVariable.isFloat == true ? "float-navigation":""}}><view class={{policyFilter.curSelectNavigationItemFormate(pageVariable.curSelectedItemId,...
今天给大家带来一个微信小程序的弹出是菜单效果，老规矩先上效果图。(录制的gif动画有点卡，实际真机或是模拟器上很顺畅)先简单说下思路： 1、首先在屏幕的某个位置放几个悬浮按钮，放几个看你需要的功能 2、点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩，这个遮罩在我前面自定义modal弹框时有用到 3、分别对按钮做旋转和移动动画和透明度，造成动画差异就是位移的动画距离不同 4、收起的时候回到原来位置并且让透...
小程序商品展示需要导航栏的商品分类进行滑动，供大家参考，具体内容如下 效果图：首先是滑动的效果： <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view>小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个，每个20%,当超出5个分类，也就是index>4的时候，导航栏下面的省略号加上（因为tab-nac的border-bottom只能显示到第五个分类） <scroll-view scroll-x="tr...
匿名函数下的this 方便本地demo，没有使用webpack 引入两个文件，vue和axios axios返回一个promise对象，我们通过axios进行ajax请求<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script> <body><div id="app">{{ message }}</div> </body>看下js部分 var message = 我是全局message!; var app = new Vue({el: #app,data() {return {message: ...
本文实例讲述了微信小程序使用map组件实现路线规划功能。分享给大家供大家参考，具体如下： 效果图实现原理 1. 通过map组件标记起始点和绘制路线图； 2. 通过高德地图API获取不同类型的路线坐标点，以及耗费时间和路程。 WXML <view class="flex-style"><view class="flex-item {{status == car ? active : }}" data-status="car" bindtouchstart="goTo">驾车</view><view class="flex-item {{status == walk ? active : }}" data-...
本文实例讲述了微信小程序全局变量功能与用法。分享给大家供大家参考，具体如下： 全局变量的作用在微信小程序开发中，会遇到一个很实际的应用场景，就是一个变量会在多个页面进行使用。例如： 1. 在微信小程序开发中使用高德地图的微信小程序开发，其中key值就需要在多个页面使用； 2. 在微信小程序开发电商平台时同样，比如客服电话，就需要在多个页面使用。在以上两种类似的场景中，开发者就需要使用全局变量，当然也有开发者说...
本文实例讲述了微信小程序使用map组件实现解析经纬度功能。分享给大家供大家参考，具体如下： 声明 bug： 页脚的详细地址在真机测试是会出现不显示问题？ 造成原因：在小程序map组件的同一区域，map组件的视图层比普通的文本视图层要高，所以在真机会遮挡！ 解决办法：将该文本视图采用cover-view，放在map中。 感谢： 感谢Lrj_estranged指出问题！ 效果图实现原理 1. map组件实现定位标记或者指定定位标记，并保存location。 2. 采...
本文实例讲述了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能。分享给大家供大家参考，具体如下： 效果图实现原理采用高德地图微信小程序开发API（getWeather），如果 city 属性的值为空（或者没有city属性），默认返回定位位置的天气数据；如果 city 不为空，则返回 city 指定位置的天气数据。WXML <view class="map-weather"><view><text>城市：</text>{{address}}</view><view><text>天气：</text>{{weat...
本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码，适用于年会抽奖，供大家参考，具体内容如下 效果图比较卡顿，真实运行效果是旋转的用到的素材：实现步骤： 实现原理 改变每一项的透明度实现选中效果。利用setTimeOut时间使旋转速度越来越慢。达到慢慢停止的效果。实际应用中可以将9张奖品图片和中奖项均通过接口返回。以方便奖品的调整。 1.布局绘制 <view class="container">停止位置:<input value={{luckPosition}} ...
今天整理了下以前写的小demo，把大转盘抽奖的代码，整合下，列了网页版和小程序两个版本，这个转盘抽奖的核心是H5的canvas和Css3的translate属性，非常简单，写了网页版和小程序版供大家参考，主要核心代码就是利用canvas画图，完整代码见大转盘抽奖，下载可用 希望给大家带来帮助 //转盘内部绘制 lottery.prototype.getCanvasI=function(){let itemsArc=360/this.itemsNum //获取大转盘每等分的角度this.itemsArc=itemsArclet wi...
本文实例讲述了微信小程序使用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...