@shixinde/vuepress-theme-init
Version:
82 lines (81 loc) • 27.3 kB
JavaScript
import{_ as n,c as s,o as a,a as p}from"./app-Dx9bNbfq.js";const t={},e=p(`<h2 id="向上一个页面传递值" tabindex="-1"><a class="header-anchor" href="#向上一个页面传递值"><span>向上一个页面传递值</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token function">backConfirm</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">var</span> pages <span class="token operator">=</span> <span class="token function">getCurrentPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"> <span class="token comment">// if (pages.length > 2) {</span></span>
<span class="line"> <span class="token keyword">var</span> currPage <span class="token operator">=</span> pages<span class="token punctuation">[</span>pages<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span> <span class="token comment">//当前页面</span></span>
<span class="line"> <span class="token keyword">var</span> prevPage <span class="token operator">=</span> pages<span class="token punctuation">[</span>pages<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">]</span> <span class="token comment">//上一个页面</span></span>
<span class="line"> <span class="token comment">// #ifdef H5</span></span>
<span class="line"> prevPage<span class="token punctuation">.</span>$vm<span class="token punctuation">.</span>unittitle <span class="token operator">=</span> val <span class="token comment">//h5写法</span></span>
<span class="line"> <span class="token comment">// #endif</span></span>
<span class="line"> </span>
<span class="line"> prevPage<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">theUnittitle</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span> </span>
<span class="line"></span>
<span class="line"> uni<span class="token punctuation">.</span><span class="token function">navigateBack</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="获取下个页面传递过来的值" tabindex="-1"><a class="header-anchor" href="#获取下个页面传递过来的值"><span>获取下个页面传递过来的值</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"> <span class="token comment">//兼容小程序,获取选中的值</span></span>
<span class="line"> <span class="token comment">//#ifdef MP-WEIXIN||MP-QQ</span></span>
<span class="line"> <span class="token keyword">let</span> pages <span class="token operator">=</span> <span class="token function">getCurrentPages</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">let</span> currPage <span class="token operator">=</span> pages<span class="token punctuation">[</span>pages<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span>unittitle <span class="token operator">=</span> currPage<span class="token punctuation">.</span>data<span class="token punctuation">.</span>theUnittitle<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>currPage<span class="token punctuation">.</span>data<span class="token punctuation">.</span>theUnittitle<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">,</span> <span class="token string">'work'</span><span class="token punctuation">,</span> currPage<span class="token punctuation">.</span>data<span class="token punctuation">.</span>theUnittitle<span class="token punctuation">.</span>unitname<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">,</span> <span class="token string">'unitid'</span><span class="token punctuation">,</span> currPage<span class="token punctuation">.</span>data<span class="token punctuation">.</span>theUnittitle<span class="token punctuation">.</span>unitid<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">,</span> <span class="token string">'topOrganizId'</span><span class="token punctuation">,</span> currPage<span class="token punctuation">.</span>data<span class="token punctuation">.</span>theUnittitle<span class="token punctuation">.</span>topOrganizId<span class="token punctuation">)</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$set</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">,</span> <span class="token string">'topOrganizName'</span><span class="token punctuation">,</span> currPage<span class="token punctuation">.</span>data<span class="token punctuation">.</span>theUnittitle<span class="token punctuation">.</span>topOrganizName<span class="token punctuation">)</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token comment">// #endif</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="分享" tabindex="-1"><a class="header-anchor" href="#分享"><span>分享</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token operator"><</span>u<span class="token operator">-</span>cell icon<span class="token operator">=</span><span class="token string">"share"</span> title<span class="token operator">=</span><span class="token string">"分享豫直先锋"</span> openType<span class="token operator">=</span><span class="token string">"share"</span> arrow<span class="token operator">-</span>direction<span class="token operator">=</span><span class="token string">"right"</span> @click<span class="token operator">=</span><span class="token string">"clickHandler"</span></span>
<span class="line"> <span class="token operator">:</span>border<span class="token operator">=</span><span class="token string">"false"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>u<span class="token operator">-</span>cell<span class="token operator">></span></span>
<span class="line"><span class="token comment">//分享</span></span>
<span class="line"> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>mpShare<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'豫直先锋'</span></span>
<span class="line"> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>mpShare<span class="token punctuation">.</span>path <span class="token operator">=</span> <span class="token string">'pages/index/index'</span></span>
<span class="line"> uni<span class="token punctuation">.</span>$u<span class="token punctuation">.</span>mpShare<span class="token punctuation">.</span>imageUrl <span class="token operator">=</span> <span class="token string">'这个分享图片和分享标题做成后台可以替换的'</span></span>
<span class="line"><span class="token comment">// #endif</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="键盘被抬起后-输入框位置适配" tabindex="-1"><a class="header-anchor" href="#键盘被抬起后-输入框位置适配"><span>键盘被抬起后 输入框位置适配</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> inputBoxBottom <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">onKeyboardShow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">height</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> inputBoxBottom<span class="token punctuation">.</span>value <span class="token operator">=</span> height<span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">onKeyboardHide</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> inputBoxBottom<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> uni<span class="token punctuation">.</span><span class="token function">onKeyboardHeightChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> height <span class="token operator">=</span> res<span class="token punctuation">.</span>height<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>height <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">onKeyboardShow</span><span class="token punctuation">(</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">onKeyboardHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>1.定义底部输入框外层view距离底部距离的变量inputBoxBottom:</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><span class="token selector">data:</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token property">inputBoxBottom</span><span class="token punctuation">:</span>0</span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>2.在页面的onLoad生命周期中监听键盘事件,记录键盘弹起的高度,并将高度赋值给inputBoxBottom</p><div class="language-typescript line-numbers-mode" data-highlighter="prismjs" data-ext="ts" data-title="ts"><pre class="language-typescript"><code><span class="line"><span class="token function">onLoad</span><span class="token punctuation">(</span>options<span class="token operator">:</span> <span class="token builtin">any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> wx<span class="token punctuation">.</span><span class="token function">onKeyboardHeightChange</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">const</span> height <span class="token operator">=</span> res<span class="token punctuation">.</span>height<span class="token punctuation">;</span></span>
<span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>height <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onKeyboardShow</span><span class="token punctuation">(</span>height<span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onKeyboardHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token function">onKeyboardShow</span><span class="token punctuation">(</span>height<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> inputBoxBottom<span class="token operator">:</span> height<span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token function">onKeyboardHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// 处理键盘收起逻辑</span></span>
<span class="line"> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span>
<span class="line"> inputBoxBottom<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>3.将inputBoxBottom变量设置给底部输入框外层的view标签:</p><div class="language-ini line-numbers-mode" data-highlighter="prismjs" data-ext="ini" data-title="ini"><pre class="language-ini"><code><span class="line"><span class="token key attr-name"><view class</span><span class="token punctuation">=</span><span class="token value attr-value">"input-box" style="bottom:{{inputBoxBottom}}px"></view></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>4.设置textarea标签adjust-position="false",保证键盘弹起时,页面不会被顶起,只是底部输入框bottom变化而使输入框抬起至键盘上方:</p><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css" data-title="css"><pre class="language-css"><code><span class="line"><textarea adjust-position=<span class="token string">"{{false}}"</span> ></textarea></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>链接：https://juejin.cn/post/7512502594020655155</p>`,17),o=[e];function c(l,i){return a(),s("div",null,o)}const r=n(t,[["render",c],["__file","小程序笔记.html.vue"]]),k=JSON.parse('{"path":"/%E5%B8%B8%E7%94%A8%E7%AC%94%E8%AE%B0/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AC%94%E8%AE%B0.html","title":"","lang":"zh-CN","frontmatter":{},"headers":[{"level":2,"title":"向上一个页面传递值","slug":"向上一个页面传递值","link":"#向上一个页面传递值","children":[]},{"level":2,"title":"获取下个页面传递过来的值","slug":"获取下个页面传递过来的值","link":"#获取下个页面传递过来的值","children":[]},{"level":2,"title":"分享","slug":"分享","link":"#分享","children":[]},{"level":2,"title":"键盘被抬起后 输入框位置适配","slug":"键盘被抬起后-输入框位置适配","link":"#键盘被抬起后-输入框位置适配","children":[]}],"git":{"updatedTime":1755344722000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":2}]},"filePathRelative":"常用笔记/小程序笔记.md","excerpt":"<h2>向上一个页面传递值</h2>\\n<div class=\\"language-javascript\\" data-highlighter=\\"prismjs\\" data-ext=\\"js\\" data-title=\\"js\\"><pre class=\\"language-javascript\\"><code><span class=\\"line\\"> <span class=\\"token function\\">backConfirm</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span> <span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">var</span> pages <span class=\\"token operator\\">=</span> <span class=\\"token function\\">getCurrentPages</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"> <span class=\\"token comment\\">// if (pages.length > 2) {</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">var</span> currPage <span class=\\"token operator\\">=</span> pages<span class=\\"token punctuation\\">[</span>pages<span class=\\"token punctuation\\">.</span>length <span class=\\"token operator\\">-</span> <span class=\\"token number\\">1</span><span class=\\"token punctuation\\">]</span> <span class=\\"token comment\\">//当前页面</span></span>\\n<span class=\\"line\\"> <span class=\\"token keyword\\">var</span> prevPage <span class=\\"token operator\\">=</span> pages<span class=\\"token punctuation\\">[</span>pages<span class=\\"token punctuation\\">.</span>length <span class=\\"token operator\\">-</span> <span class=\\"token number\\">2</span><span class=\\"token punctuation\\">]</span> <span class=\\"token comment\\">//上一个页面</span></span>\\n<span class=\\"line\\"> <span class=\\"token comment\\">// #ifdef H5</span></span>\\n<span class=\\"line\\"> prevPage<span class=\\"token punctuation\\">.</span>$vm<span class=\\"token punctuation\\">.</span>unittitle <span class=\\"token operator\\">=</span> val <span class=\\"token comment\\">//h5写法</span></span>\\n<span class=\\"line\\"> <span class=\\"token comment\\">// #endif</span></span>\\n<span class=\\"line\\"> </span>\\n<span class=\\"line\\"> prevPage<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">setData</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">{</span></span>\\n<span class=\\"line\\"> <span class=\\"token literal-property property\\">theUnittitle</span><span class=\\"token operator\\">:</span> <span class=\\"token punctuation\\">{</span><span class=\\"token literal-property property\\">id</span><span class=\\"token operator\\">:</span><span class=\\"token number\\">1</span><span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">)</span> </span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"> uni<span class=\\"token punctuation\\">.</span><span class=\\"token function\\">navigateBack</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span></span>\\n<span class=\\"line\\"></span>\\n<span class=\\"line\\"> <span class=\\"token punctuation\\">}</span></span>\\n<span class=\\"line\\"></span></code></pre></div>"}');export{r as comp,k as data};