Skip to content

Commit 13dbf49

Browse files
pangPythonpangPython
committed
添加文章 微信小程序九宫格布局
1 parent 4c0141d commit 13dbf49

12 files changed

+774
-49
lines changed

‎.jekyll-cache/Jekyll/Cache/Jekyll--Cache/b7/9606fb3afea5bd1609ed40b622142f1c98125abcfe89a76a661b0e8e343910‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
I"u
2+
{"source"=>"F:/blog/pangpython.github.io", "destination"=>"F:/blog/pangpython.github.io/_site", "collections_dir"=>"", "cache_dir"=>".jekyll-cache", "plugins_dir"=>"_plugins", "layouts_dir"=>"_layouts", "data_dir"=>"_data", "includes_dir"=>"_includes", "collections"=>{"posts"=>{"output"=>true, "permalink"=>"/posts/:categories/:title.html"}}, "safe"=>false, "include"=>[".htaccess"], "exclude"=>[".sass-cache", ".jekyll-cache", "gemfiles", "Gemfile", "Gemfile.lock", "node_modules", "vendor/bundle/", "vendor/cache/", "vendor/gems/", "vendor/ruby/"], "keep_files"=>[".git", ".svn"], "encoding"=>"utf-8", "markdown_ext"=>"markdown,mkdown,mkdn,mkd,md", "strict_front_matter"=>false, "show_drafts"=>nil, "limit_posts"=>0, "future"=>false, "unpublished"=>false, "whitelist"=>[], "plugins"=>[], "markdown"=>"kramdown", "highlighter"=>"rouge", "lsi"=>false, "excerpt_separator"=>"\n\n", "incremental"=>true, "detach"=>false, "port"=>"4000", "host"=>"127.0.0.1", "baseurl"=>"/", "show_dir_listing"=>false, "permalink"=>"/posts/:categories/:title.html", "paginate_path"=>"/page:num", "timezone"=>nil, "quiet"=>false, "verbose"=>false, "defaults"=>[], "liquid"=>{"error_mode"=>"warn", "strict_filters"=>false, "strict_variables"=>false}, "kramdown"=>{"auto_ids"=>true, "toc_levels"=>"1..6", "entity_output"=>"as_char", "smart_quotes"=>"lsquo,rsquo,ldquo,rdquo", "input"=>"GFM", "hard_wrap"=>false, "guess_lang"=>true, "footnote_nr"=>1, "show_warnings"=>false, "highlight"=>true, "syntax_highlighter"=>"rouge", "syntax_highlighter_opts"=>{:guess_lang=>true}, "coderay"=>{}}, "author"=>"pangPython", "email"=>"pangPython@qq.com", "twitter_username"=>"twitter", "github_username"=>"pangPython", "googleplus_username"=>"google", "head-title"=>"pangPython\u7684\u535A\u5BA2", "title"=>"pangPython\u7684\u535A\u5BA2", "url"=>"http://localhost:4000", "description"=>"I know that what I'm doing looks stupid, but I'm a big boy and really want to do this.", "favo"=>"\u6625\u68A6\u968F\u4E91\u6563\uFF0C\u98DE\u82B1\u9010\u6C34\u6D41", "descrpt"=>"\u201C\u5DE7\u8005\u52B3\u800C\u667A\u8005\u5FE7\uFF0C\u65E0\u80FD\u8005\u65E0\u6240\u6C42\uFF0C\u9971\u98DF\u800C\u9068\u6E38\uFF0C\u6CDB\u82E5\u4E0D\u7CFB\u4E4B\u821F\u201D \u2014\u2014\u300A\u5357\u534E\u7ECF\u300B", "sass"=>{"style"=>:compressed}, "paginate"=>7, "gems"=>["jekyll-paginate", "jekyll-last-modified-at", "jemoji"], "header-color"=>"indigo lighten-1", "head-theme-color"=>"#5c6bc0", "footer-color"=>"indigo lighten-1", "footer-button-color"=>"indigo lighten-2", "footer-link-color"=>"red-text text-accent-1", "share-button-color"=>"pink", "share-button-small-color"=>"", "watch"=>true, "livereload_port"=>35729, "serving"=>true}:encoding"GBK

‎.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/08/1491c71a39cd12fb1af11187e17973774fc292c7be522a70c37bb872c61599‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
I"P"<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>weui提供了小程序中使用的Grid组件（https://github.com/wechat-miniprogram/miniprogram-demo/tree/master/miniprogram/page/weui/example/grid）
2+
</code></pre></div></div>
3+
4+
<p>wxml:</p>
5+
6+
<figure class="highlight"><pre><code class="language-html" data-lang="html"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
7+
2
8+
3
9+
4
10+
5
11+
6
12+
7
13+
8
14+
9
15+
10
16+
11
17+
12
18+
13
19+
14
20+
15
21+
16
22+
</pre></td><td class="code"><pre><span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page"</span><span class="nt">&gt;</span>
23+
<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page__hd"</span><span class="nt">&gt;</span>
24+
<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page__title"</span><span class="nt">&gt;</span>小工具<span class="nt">&lt;/view&gt;</span>
25+
<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page__desc"</span><span class="nt">&gt;</span>助你的瘦身一臂之力<span class="nt">&lt;/view&gt;</span>
26+
<span class="nt">&lt;/view&gt;</span>
27+
<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"page__bd"</span><span class="nt">&gt;</span>
28+
<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"weui-grids bg-map"</span><span class="nt">&gt;</span>
29+
<span class="nt">&lt;block</span> <span class="na">wx:for=</span><span class="s">""</span> <span class="na">wx:key=</span><span class="s">"*this"</span><span class="nt">&gt;</span>
30+
<span class="nt">&lt;navigator</span> <span class="na">url=</span><span class="s">""</span> <span class="na">class=</span><span class="s">"weui-grid"</span> <span class="na">hover-class=</span><span class="s">"weui-grid_active"</span><span class="nt">&gt;</span>
31+
<span class="nt">&lt;image</span> <span class="na">class=</span><span class="s">"weui-grid__icon"</span> <span class="na">src=</span><span class="s">""</span> <span class="nt">/&gt;</span>
32+
<span class="nt">&lt;view</span> <span class="na">class=</span><span class="s">"weui-grid__label"</span><span class="nt">&gt;&lt;/view&gt;</span>
33+
<span class="nt">&lt;/navigator&gt;</span>
34+
<span class="nt">&lt;/block&gt;</span>
35+
<span class="nt">&lt;/view&gt;</span>
36+
<span class="nt">&lt;/view&gt;</span>
37+
<span class="nt">&lt;/view&gt;</span>
38+
</pre></td></tr></tbody></table></code></pre></figure>
39+
40+
<p>js:</p>
41+
42+
<figure class="highlight"><pre><code class="language-js" data-lang="js"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
43+
2
44+
3
45+
4
46+
5
47+
6
48+
7
49+
8
50+
9
51+
10
52+
11
53+
12
54+
13
55+
14
56+
15
57+
16
58+
17
59+
18
60+
19
61+
20
62+
21
63+
22
64+
23
65+
24
66+
25
67+
26
68+
27
69+
28
70+
29
71+
30
72+
31
73+
32
74+
33
75+
34
76+
35
77+
36
78+
37
79+
38
80+
39
81+
40
82+
41
83+
42
84+
43
85+
44
86+
45
87+
46
88+
47
89+
48
90+
49
91+
50
92+
51
93+
52
94+
53
95+
54
96+
55
97+
56
98+
57
99+
58
100+
</pre></td><td class="code"><pre><span class="c1">// miniprogram/pages/functions/functions.js</span>
101+
<span class="nx">Page</span><span class="p">({</span>
102+
<span class="cm">/**
103+
* 页面的初始数据
104+
*/</span>
105+
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
106+
<span class="na">grids</span><span class="p">:</span> <span class="p">[{</span>
107+
<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/pages/add/add</span><span class="dl">'</span><span class="p">,</span>
108+
<span class="na">imgPath</span><span class="p">:</span> <span class="dl">'</span><span class="s1">../../images/weight.png</span><span class="dl">'</span><span class="p">,</span>
109+
<span class="na">text</span><span class="p">:</span><span class="dl">'</span><span class="s1">体重记录</span><span class="dl">'</span>
110+
<span class="p">},</span> <span class="p">{</span>
111+
<span class="na">url</span><span class="p">:</span> <span class="dl">'</span><span class="s1">/pages/drinking/drinking</span><span class="dl">'</span><span class="p">,</span>
112+
<span class="na">imgPath</span><span class="p">:</span> <span class="dl">'</span><span class="s1">../../images/water.png</span><span class="dl">'</span><span class="p">,</span>
113+
<span class="na">text</span><span class="p">:</span> <span class="dl">'</span><span class="s1">喝水记录</span><span class="dl">'</span>
114+
<span class="p">},</span>
115+
<span class="p">]</span>
116+
<span class="p">},</span>
117+
<span class="cm">/**
118+
* 生命周期函数--监听页面加载
119+
*/</span>
120+
<span class="na">onLoad</span><span class="p">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
121+
<span class="p">},</span>
122+
<span class="cm">/**
123+
* 生命周期函数--监听页面初次渲染完成
124+
*/</span>
125+
<span class="na">onReady</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
126+
<span class="p">},</span>
127+
<span class="cm">/**
128+
* 生命周期函数--监听页面显示
129+
*/</span>
130+
<span class="na">onShow</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
131+
<span class="p">},</span>
132+
<span class="cm">/**
133+
* 生命周期函数--监听页面隐藏
134+
*/</span>
135+
<span class="na">onHide</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
136+
<span class="p">},</span>
137+
<span class="cm">/**
138+
* 生命周期函数--监听页面卸载
139+
*/</span>
140+
<span class="na">onUnload</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
141+
<span class="p">},</span>
142+
<span class="cm">/**
143+
* 页面相关事件处理函数--监听用户下拉动作
144+
*/</span>
145+
<span class="na">onPullDownRefresh</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
146+
<span class="p">},</span>
147+
<span class="cm">/**
148+
* 页面上拉触底事件的处理函数
149+
*/</span>
150+
<span class="na">onReachBottom</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
151+
<span class="p">},</span>
152+
<span class="cm">/**
153+
* 用户点击右上角分享
154+
*/</span>
155+
<span class="na">onShareAppMessage</span><span class="p">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
156+
<span class="p">}</span>
157+
<span class="p">})</span>
158+
</pre></td></tr></tbody></table></code></pre></figure>
159+
160+
<p>json:</p>
161+
162+
<figure class="highlight"><pre><code class="language-json" data-lang="json"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
163+
2
164+
3
165+
</pre></td><td class="code"><pre><span class="p">{</span><span class="w">
166+
</span><span class="nl">"usingComponents"</span><span class="p">:</span><span class="w"> </span><span class="p">{}</span><span class="w">
167+
</span><span class="p">}</span>
168+
</pre></td></tr></tbody></table></code></pre></figure>
169+
170+
<p>wxss:</p>
171+
172+
<figure class="highlight"><pre><code class="language-css" data-lang="css"><table class="rouge-table"><tbody><tr><td class="gutter gl"><pre class="lineno">1
173+
2
174+
3
175+
4
176+
5
177+
6
178+
7
179+
8
180+
9
181+
10
182+
11
183+
</pre></td><td class="code"><pre><span class="c">/* miniprogram/pages/functions/functions.wxss */</span>
184+
<span class="k">@import</span> <span class="s2">'../common.wxss'</span><span class="p">;</span>
185+
<span class="nc">.bg-map</span><span class="p">{</span>
186+
<span class="nl">width</span><span class="p">:</span> <span class="m">90%</span><span class="p">;</span>
187+
<span class="c">/* height: auto; */</span>
188+
<span class="nl">border-radius</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span>
189+
<span class="nl">box-shadow</span><span class="p">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">5</span><span class="p">,</span><span class="m">26</span><span class="p">,</span><span class="m">180</span><span class="p">,</span><span class="m">0.15</span><span class="p">)</span> <span class="m">0px</span> <span class="m">1px</span> <span class="m">8px</span><span class="p">;</span>
190+
<span class="nl">margin</span><span class="p">:</span> <span class="m">16px</span> <span class="m">16px</span><span class="p">;</span>
191+
<span class="nl">background</span><span class="p">:</span> <span class="m">#fff</span><span class="p">;</span>
192+
<span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span>
193+
<span class="p">}</span>
194+
</pre></td></tr></tbody></table></code></pre></figure>
195+
196+
<p>效果图：
197+
<img src="/assets/images/wx-miniprogram-grid.png" alt="微信小程序九宫格布局图" /></p>
198+
:ET

‎.jekyll-cache/Jekyll/Cache/Jekyll--Converters--Markdown/46/77f86fef26024e9ecee668273c8db5426c820d0e708f4b98e9a29da3400a74‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
I"<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>weui提供了小程序中使用的Grid组件（https://github.com/wechat-miniprogram/miniprogram-demo/tree/master/miniprogram/page/weui/example/grid）
2+
</code></pre></div></div>
3+
:ET

0 commit comments

Comments
 (0)