您现在的位置: 首页 > 微信营销 > 微信动态文章 > 微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

作者:pc668   来源:  热度:650  时间:2021-10-21
被键盘遮挡可以通过设置cursor-spacing来解决 光标位置出现在倒数第二个字的后面这种是在获取焦点后,动态修改了textarea的高度,以便于让用户在更大的显示区输入微信小程序地图组件。这个就只能修改一下,用wx:if命令实现用其他组件来模拟获取焦点前的输入框,点击这个组件再显示textarea,并设置auto-focus属性为true,这样可以呼出键盘 失去焦点键盘不自动收起这个可以通过手动调用wx.hideKeyboard(

被键盘遮挡可以通过设置cursor-spacing来解决 光标位置出现在倒数第二个字的后面这种是在获取焦点后,动态修改了textarea的高度,以便于让用户在更大的显示区输入微信小程序地图组件。这个就只能修改一下,用wx:if命令实现用其他组件来模拟获取焦点前的输入框,点击这个组件再显示textarea,并设置auto-focus属性为true,这样可以呼出键盘 失去焦点键盘不自动收起这个可以通过手动调用wx.hideKeyboard()来解决 placeholder或textarea中的内容乱跳检查一下你是否设置了fixed属性,哪怕它真的在fixed布局中也尽量不要用。它的光标位置会让你怀疑人生。。 检查页面中是否有video组件,如果有,通过wx:if命令在你呼出textarea后干掉它。它也会导致这种bug,并且会遮住一切挡住它的东西 不过即使以上你都做了,还是有一定概率乱跳,这个无解。。

怎样在小程序中绘制图表?

由于微信小程序本身框架的限制,很难集成目前已有的图表工具,显示图表目前有两种方案: 服务器端渲染图表,输出图片,微信小程序中直接显示渲染好的图片; 利用微信小程序 API 中提供的 canvas 组件支持,自行绘制图表。 前一种方案已经有非常多类似服务可选,比如 Highcharts 提供了服务端渲染的能力。但这种方式需要后台有一套渲染服务,并且有一定的网络开销。 那么,如何利用 canvas 组件,在小程序中绘制图表呢微信小程序地图组件?下面,我们就来看尝试一下。 API 首先,我们在模板文件中使用 声明一个 canvas 组件,再使用 wx.createContext() 获取绘图上下文 context。 接下来,我们调用 wx.drawCanvas() 进行绘制:

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

开始图表的绘制 绘制折线图

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

需要注意的是微信小程序地图组件,moveTo() 方法不会记录到路径中。 看看效果图:

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

好像没有想象中难微信小程序地图组件,看上去效果还不错。 绘制每个数据点的标识图案

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

效果图微信小程序地图组件:

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

微信小程序地图组件:怎么在微信小程序中使用textarea多行输入框?

为了避免之前绘制的折线路径影响到标识图案的路径微信小程序地图组件,这一部分包裹在了 beginPath() 和 closePath() 之间。

绘制横坐标 我们规定的参数格式是这样的微信小程序地图组件:

我们根据参数中的 categories 来绘制横坐标微信小程序地图组件。先稍微整理下思路: 根据 categories 数均分画布宽度; 计算出横坐标中每个分类的起始点; 绘制文案(这儿会多一些代码,后面会具体提到)

效果图微信小程序地图组件:

效果其实还行微信小程序地图组件,除了文字没有居中....... 查阅微信小程序官方提供的文档,小程序并没有提供 HTML 5 canvas 中的 mesureText(获取文案宽度)的方法。 下面是我们自己简单的实现,并不是绝对精确,但误差基本可以忽略。

这里分别处理了字母微信小程序地图组件、数字、点(.)、横线(-)以及汉字这几个常用字符。 上面的代码稍微修改下:

前后图表对比微信小程序地图组件:

登录

使用微信帐号或QQ直接登录,无需注册