本文实例讲述了微信小程序实现的动态设置导航栏标题功能。分享给大家供大家参考,具体如下: 场景 当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分。就需要开发者在页面加载的时候进行动态设置导航标题! 实现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...