项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和cover-image替换tab的view后,可以解决以上的问题. <!--底部公共tabBar--> <cover-view class="tabbar-con"> <cover-view class="{{villageIs?'nav-btn-h

<!--pages/bar/index.wxml--> <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas

一.问题描述: 在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用.要求一个页面中有多个饼图,动态渲染不同的数据. 二.效果实现: 1. 查看——小程序使用Echarts的方式 2. 封装饼图公共组件 // pie.wxml <view class="containers"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }

1.下载 GitHub 上的 ecomfe/echarts-for-weixin 项目,Echarts微信版. 地址:https://github.com/ecomfe/echarts-for-weixin 2.将 ec-canvas 文件放置到小程序项目中    3.使用echarts(饼图为例) // json文件 "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" }

wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width height = rect.height top = rect.top }).exec() 如上,拿到了id为box的view,并获取到了它的宽.高等属性,此段代码要放在onReady函数中 注意:如果这个view的宽高是随着内容而变化的话,这样获取到的宽高就有可能还是渲染完成前的值,不知是不是小程序自己的

首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把整体下载下来,这边只需要下载几个简单的东西下来即可! 1. 在小程序中新建一个组件,如下 2. 建好文件之后还不着急写代码,看到我上面的图里面不是还有两个文件文件吗?咱先把资源文件给干下来再说 继续到echarts官网中 往下翻找到 应用篇 看到下面的跨平台方案-微信小程序 这边会告诉你 需要去gi

官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte

一.效果图 二.代码 import * as echarts from '../../component/ec-canvas/echarts'; const app = getApp(); var xData = ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", &qu

页面wxml <!--page/index/index.wxml--> <view id='demo'> <text>哈哈哈哈哈</text> <view>哈哈哈哈哈</view> </view> js文件 onLoad: function(options) { //创建节点选择器 var query = wx.createSelectorQuery(); //选择id query.select('#demo').boun

1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view> 2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;"

一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ px换算rpx (750/屏幕宽度)] App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res this.globalData.windowHeight =

hover:class  :定义容器在被触发时的样式 通常无用,但若不去除则影响用户体验: 为避免被覆盖,约定在wxss底部添加class,比如: <!-- wxml --> <navigator class="index-nav_box" hover-class="noshadow"> <image></image> <view class="index-nav-des">现采蓝莓1斤

效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平拖动新闻--> <scroll-view scroll-x class="menu"> <view class="scroll-nav"> <navigator url="">社会新闻</navigat

如何在微信小程序中使用Echarts可以看我的另一个教程:点击查看 首先看一个简单的例子 1.wxml文件 <view style='width:100%;height:200rpx'> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> 2.js文件 import *

小程序引入e-charts图表 这里是狗尾草第一次发表掘金文章,日后望各位大佬多多支持~ 前言:运营助手,见名知意,没有图表数据的展示,看上去是有多空白.因此,俺们UI做了很好的交互,一个页面来了4个e-charts图表,且基本都不一样.身为一个职业前端,怎么能猥琐呢? 干就完了~ 实现思路 因为一个页面要引入多个图表,所以需要对e-charts图表进行封装.然鹅问题来了,怎么引入呢? 为了兼容小程序 Canvas,ECharts提供了一个小程序的组件,用这种方式可以方便地使用 ECharts.

微信小程序使用 ECharts 显示图表 首先创建微信小程序 这里就不再赘述 下载 GitHub 上的 ecomfe/echarts-for-weixin 下载后解压,打开文件夹,里面的 ec-canvas 文件夹是我们需要的 创建图表 首先,把下载的 ec-canvas 文件夹复制到小程序根目录中,与 pages 同级 然后在 page/bar 目录下新建以下几个文件 配置 index.json 配置如下: { "usingComponents": { "ec-canvas

echarts-for-weixin 是 ECharts 官方维护的一个开源项目,提供了一个微信小程序组件(Component),我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表. echarts-for-weixin 自身包含很多使用示例,方便我们参考. 安装 ECharts 组件 克隆项目: git clone https://github.com/ecomfe/echarts-for-weixin.git 切换版本: git checkout v2.0.0 echarts-

概述 该程序支持功能有查天气.查诗词.查百科.算算术.查日历.看笑话.看故事.聊天等,通过用户输入语句智能解析用户意图输出相应答案. 详细 代码下载:http://www.demodashi.com/demo/11339.html 一.准备工作 1.电脑需要安装有微信web开发者工具,如果没有请点击这里安装:下载地址 2.成为微信小程序开发者,需要用到appID,详细流程见微信公众平台流程介绍. 二.程序实现 1.扫码体验: 2.项目目录如下: main为首页面,实现天气查询(使用modal组件

这两天对这个个人博客小程序的UI又作了一些补充,目前看来,小程序的主要功能如下: 1.博客/日常栏目的导航切换 为了避免两个模块的UI上的过于单一,我将两个模块的列表页作了区分: 边距是自适应的(针对不同机型),通过js控制,部分js如下: 首先来看看获取手机导航高度以及宽度数据的API应用: //获取手机信息设定导航高度以及其他,位于app.js内,vm是this wx.getSystemInfo({ success: function (res) { console.log(res); le

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字——爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json