沙头粉都是初生养的 發表於 2020-3-27 11:41:00

微信小程序开发-地图map组件上使用input组件

<h1 class="code-line" data-line-start="0" data-line-end="1">微信小程序开发-地图map组件上使用input组件</h1>
<p class="has-line-data" data-line-start="2" data-line-end="3">标签： 微信小程序 uni-app</p>
<hr>
<h2 class="code-line" data-line-start="6" data-line-end="7">原生组件层级关系</h2>
<h3 class="code-line" data-line-start="9" data-line-end="10">微信小程序在最高层级</h3>
<blockquote>
<ul>
<li class="has-line-data" data-line-start="11" data-line-end="12">在微信小程序中原生组件包括<code>camera</code> <code>canvas</code> <code>input（仅在focus时表现为原生组件）</code> <code>live-player</code> <code>live-pusher</code> <code>map</code> <code>textarea</code> <code>video</code></li>
<li class="has-line-data" data-line-start="12" data-line-end="14">在微信小程序开发中原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。<br>
后插入的原生组件可以覆盖之前的原生组件。</li>
<li class="has-line-data" data-line-start="14" data-line-end="16">原生组件还无法在 picker-view 中使用。<br>
基础库 2.4.4 以下版本，原生组件不支持在 scroll-view、swiper、movable-view 中使用。</li>
<li class="has-line-data" data-line-start="16" data-line-end="17"><code>同层渲染</code>：同层渲染是为了解决<code>原生组件的层级问题</code>，在支持同层渲染后，<code>原生组件与其它组件可以随意叠加</code>,目前支持原生组件同层渲染有 <code>video</code>, <code>map</code>, <code>live-player</code>, <code>live-pusher</code>, <code>canvas(2d)</code> 组件已支持同层渲染。</li>
<li class="has-line-data" data-line-start="17" data-line-end="18">除开同层渲染外还可以使用 <code>cover-view</code> 和 <code>cover-image</code> 组件，可以覆盖在部分原生组件上面。</li>
</ul>
</blockquote>
<h3 class="code-line" data-line-start="19" data-line-end="20">微信小程序在地图map上使用input等最高层级标签 （uni-app框架中开发） 原生微信小程序也大致相同</h3>
<p class="has-line-data" data-line-start="21" data-line-end="22">在微信小程序真机下，map中使用input无法在map上显示，所以可以通过在页面中嵌套一个input标签和一个<code>cover-view</code>文本进行隐藏显示，通过点击<code>cover-view</code>层级的自定义方法进行input的<code>聚焦</code>，输入完成后将输入的值赋值到 <code>cover-view</code>文本框中，隐藏input组件。</p>
<p class="has-line-data" data-line-start="23" data-line-end="24">template中</p>
<pre><code class="has-line-data" data-line-start="25" data-line-end="30">&lt;cover-view <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">'main_search'</span> @tap=<span class="hljs-string">'tapInput'</span>&gt;
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">cover-view</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">'main_search_input'</span> <span class="hljs-attribute">:hidden</span>=<span class="hljs-value">"inputFocus"</span>&gt;</span>{{inputInfo}}<span class="hljs-tag">&lt;/<span class="hljs-title">cover-view</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">'main_search_input'</span> <span class="hljs-attribute">:hidden</span>=<span class="hljs-value">"!inputFocus"</span> <span class="hljs-attribute">:value</span>=<span class="hljs-value">'inputModel'</span> <span class="hljs-attribute">:focus</span>=<span class="hljs-value">'inputFocus'</span> @<span class="hljs-attribute">blur</span>=<span class="hljs-value">'blurInput'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">input</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">cover-view</span>&gt;</span>
</span></code></pre>
<p class="has-line-data" data-line-start="31" data-line-end="32">script中</p>
<pre><code class="has-line-data" data-line-start="33" data-line-end="57">data() {
    <span class="hljs-keyword">return</span> {
      inputFocus: <span class="hljs-literal">false</span>, <span class="hljs-comment">// input 框的focus状态</span>
      inputModel: <span class="hljs-string">''</span>, <span class="hljs-comment">// input 框的输入内容</span>
      inputInfo: <span class="hljs-string">'请输入搜索地址'</span>, <span class="hljs-comment">// cover-view 显示的 input 的输入内容,初始值充当placeholder作用</span>
    };
},
<p><span class="hljs-comment">// 将焦点给到 input（在真机上不能获取input焦点）</span><br>
tapInput() {<br>
<span class="hljs-keyword">this</span>.inputFocus = <span class="hljs-literal">true</span>;<br>
<span class="hljs-comment">//初始占位清空</span><br>
<span class="hljs-keyword">if</span>(<span class="hljs-keyword">this</span>.inputInfo==<span class="hljs-string">'请输入搜索地址'</span>){<br>
<span class="hljs-keyword">this</span>.inputInfo = <span class="hljs-string">''</span>;<br>
}<br>
},</p>
</code><p><code class="has-line-data" data-line-start="33" data-line-end="57"><span class="hljs-comment">// input 失去焦点后将 input 的输入内容给到cover-view</span><br>
blurInput(e) {<br>
<span class="hljs-built_in">console</span>.log(e.detail.value);<br>
<span class="hljs-keyword">this</span>.inputInfo = e.detail.value || <span class="hljs-string">'请输入搜索地址'</span>;<br>
<span class="hljs-keyword">this</span>.inputFocus = <span class="hljs-literal">false</span>;<br>
}<br>
</code></p></pre><p></p>
<h3 class="code-line" data-line-start="58" data-line-end="59">cover-view标签 Bug &amp; Tip</h3>
<p class="has-line-data" data-line-start="59" data-line-end="60">参考地址：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html</p>
<blockquote>
<ul>
<li class="has-line-data" data-line-start="60" data-line-end="61">cover-view和cover-image的aria-role仅可设置为button，读屏模式下才可以点击，并朗读出“按钮”；为空时可以聚焦，但不可点击</li>
<li class="has-line-data" data-line-start="61" data-line-end="62">最外层 cover-view 支持 position: fixed</li>
<li class="has-line-data" data-line-start="62" data-line-end="63">微信小程序基础库 1.9.0 起支持插在 view 等标签下。在此之前只可嵌套在原生组件map、video、canvas、camera内，避免嵌套在其他组件内。</li>
<li class="has-line-data" data-line-start="63" data-line-end="64">微信小程序基础库 1.6.0 起支持css transition动画，transition-property只支持transform (translateX, translateY)与opacity。</li>
<li class="has-line-data" data-line-start="64" data-line-end="65">微信小程序基础库 1.6.0 起支持css opacity。</li>
<li class="has-line-data" data-line-start="65" data-line-end="66">事件模型遵循冒泡模型，但不会冒泡到原生组件。</li>
<li class="has-line-data" data-line-start="66" data-line-end="67">文本建议都套上cover-view标签，避免排版错误。</li>
<li class="has-line-data" data-line-start="67" data-line-end="68">只支持基本的定位、布局、文本样式。不支持设置单边的border、background-image、shadow、overflow: visible等。</li>
<li class="has-line-data" data-line-start="68" data-line-end="69">支持使用 z-index 控制层级</li>
<li class="has-line-data" data-line-start="69" data-line-end="70">默认设置的样式有：white-space: nowrap; line-height: 1.2; display: block;</li>
<li class="has-line-data" data-line-start="70" data-line-end="71">自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示</li>
</ul>
</blockquote>
<h2 class="code-line" data-line-start="72" data-line-end="73">记录详情</h2>
<blockquote>
<ul>
<li class="has-line-data" data-line-start="74" data-line-end="75">记录开始时间：2020-03-17 11:00</li>
<li class="has-line-data" data-line-start="75" data-line-end="76">记录结束时间:2020-03-17 11:32</li>
<li class="has-line-data" data-line-start="76" data-line-end="77">记录作者：墨里墨白</li>
<li class="has-line-data" data-line-start="77" data-line-end="78">记录次数：1</li>
<li class="has-line-data" data-line-start="78" data-line-end="79">更新时间：2020-03-17 11:32</li>
</ul>
</blockquote><br><br>
来源：https://www.cnblogs.com/molimobai/p/12580288.html
頁: [1]
查看完整版本: 微信小程序开发-地图map组件上使用input组件