微信小程序 常用轮子
有勇气的牛排
1214
微信开发
2022-12-25 01:49:30
知止自律打卡-微信小程序APP
一款微信自律打卡小程序，支持自定义打卡项目、习惯记录、项目日记、专注计时与数据统计。自律打卡、学习打卡、读书打卡、健身打卡、运动打卡、减肥打卡、戒色打卡、养生打卡、戒烟、戒酒、戒熬夜等多种场景。万能打卡模板自由创建。可自定义每日打卡目标，记录习惯连续天数，可视化追踪成长进度。
了解产品详情 →
微信搜索「知止自律打卡」
1 布局
1.1 循环组件
<view>
<block wx:for-items="{{movies}}" wx:key="key">
<swiper-item>
<image src="{{item.url}}" class="slide-image" mode="aspectFill" />
</swiper-item>
</block>
</view>
data: {
movies: [
{ url: 'https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg' },
{ url: 'https://img2.baidu.com/it/u=3206689113,2237998950&fm=26&fmt=auto&gp=0.jpg' }
]
},
2.3 提示框Toast
wx.showToast({
image: '../../images/toast/success.png',
title: "发送成功",
})
2.4 延时函数
setTimeout(function () {
}, 2000)
<h2><a id="1__0"></a>1 布局</h2>
<h3><a id="11__2"></a>1.1 循环组件</h3>
<pre><div class="hljs"><code class="lang-html"><span class="hljs-tag"><<span class="hljs-name">view</span>></span>
<span class="hljs-tag"><<span class="hljs-name">block</span> <span class="hljs-attr">wx:for-items</span>=<span class="hljs-string">"{{movies}}"</span> <span class="hljs-attr">wx:key</span>=<span class="hljs-string">"key"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">swiper-item</span>></span>
<span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{item.url}}"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"slide-image"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"aspectFill"</span> /></span>
<span class="hljs-tag"></<span class="hljs-name">swiper-item</span>></span>
<span class="hljs-tag"></<span class="hljs-name">block</span>></span>
<span class="hljs-tag"></<span class="hljs-name">view</span>></span>
</code></div></pre>
<pre><div class="hljs"><code class="lang-javascript"><span class="hljs-attr">data</span>: {
<span class="hljs-attr">movies</span>: [
{ <span class="hljs-attr">url</span>: <span class="hljs-string">'https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg'</span> },
{ <span class="hljs-attr">url</span>: <span class="hljs-string">'https://img2.baidu.com/it/u=3206689113,2237998950&fm=26&fmt=auto&gp=0.jpg'</span> }
]
},
</code></div></pre>
<h3><a id="23_Toast_23"></a>2.3 提示框Toast</h3>
<pre><div class="hljs"><code class="lang-javascript">wx.<span class="hljs-title function_">showToast</span>({
<span class="hljs-attr">image</span>: <span class="hljs-string">'../../images/toast/success.png'</span>,
<span class="hljs-attr">title</span>: <span class="hljs-string">"发送成功"</span>,
})
</code></div></pre>
<h3><a id="24__31"></a>2.4 延时函数</h3>
<pre><div class="hljs"><code class="lang-javascript"><span class="hljs-built_in">setTimeout</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
<span class="hljs-comment">//要延时执行的代码</span>
}, <span class="hljs-number">2000</span>) <span class="hljs-comment">//延迟时间 这里是2秒</span>
</code></div></pre>
评论区