1、微信小程序動態(tài)添加Class樣式
先用一個狀態(tài)進(jìn)行標(biāo)識，然后對其添加樣式
JS
<view id="fenlei_content">
<view catchtap="getList" data-value="120" class="{{flagValue == 120 ? 'active' : ''}}">
<image src="../../images/daifukuan.png"></image>
<view>待付款</view>
</view>
<view catchtap="getList" data-value="122" class="{{flagValue == 122 ? 'active' : ''}}">
<image src="../../images/daishouhuo.png"></image>
<text>待收貨</text>
</view>
<view catchtap="getList" data-value="124" class="{{flagValue == 124 ? 'active' : ''}}">
<image src="../../images/yiwancheng.png"></image>
<text>已完成</text>
</view>
</view>
CSS
#fenlei_content .active {
font-weight: bold;
}
2、微信小程序中的目錄
./當(dāng)前目錄 ../父級目錄 /根目錄
3、倒計(jì)時時間
// 待付款訂單倒計(jì)時
countdown() {
// 獲取訂單時間
let create_time = this.data.orderDetail.create_time.split(".")[0];
let countdown= setInterval(() => {
// 把訂單時間轉(zhuǎn)換為30分鐘后的時間戳當(dāng)成結(jié)束時間
let endTime = new Date(create_time).getTime() + 30 * 60 * 1000;
// 實(shí)時獲取當(dāng)前時間
let date = new Date();
let now = date.getTime();
// 時間差
let ts = endTime - now;
//計(jì)算剩余的分鐘數(shù)
var mm = Math.floor((ts / 1000 / 60) % 60);
//計(jì)算剩余的秒數(shù)
var ss = Math.floor((ts / 1000) % 60);
// 如果顯示的分秒小于10,需要在其前面加上0更美觀
mm = mm < 10 ? "0" + mm : mm;
ss = ss < 10 ? "0" + ss : ss;
if (ts <= 0) {
clearInterval(countdown);
} else {
this.setData({
Minutes: mm,
Second: ss,
});
}
}, 1000);
},
4、微信小程序分類-左側(cè)導(dǎo)航與右側(cè)內(nèi)容聯(lián)動
①
5、當(dāng)容器內(nèi)容過多時有滾動條
需要添加高度
<scroll-view scroll-y style="height:200rpx;"></scroll-view>
6、自定義遮罩層，當(dāng)遮罩層展示時底部內(nèi)容不滑動，即滑動穿透
在遮罩層上應(yīng)用以下屬性
注：在電腦上可能看不出效果，可以用真機(jī)調(diào)試看一下是否應(yīng)用上。
catchtouchmove="{{true}}"
7、wx:if
①當(dāng)判斷里面的內(nèi)容不等于字符串時，應(yīng)該用單引號：wx:if="{{item.flag=='待付款'}}"
②wx:if;wx:elif;wx:else
③hidden:在標(biāo)簽上直接加入屬性hidden;例如：hidden="{{true}}";
④分別什么場景使用：wx:if是直接把標(biāo)簽從頁面結(jié)構(gòu)中移除掉，當(dāng)標(biāo)簽不是頻繁的切換顯示時優(yōu)先使用wx:if；hidden是通過添加樣式的方式來切換顯示，當(dāng)標(biāo)簽頻繁的切換顯示時優(yōu)先使用hidden
⑤hidden屬性不要和樣式display一起使用
8、頁面跳轉(zhuǎn)方式
①關(guān)閉當(dāng)前頁面,跳轉(zhuǎn)到下一頁面
wx.redirectTo({
url: "/pages/paymentSuccess/paymentSuccess",
});
②跳轉(zhuǎn)到 Tabbar頁面
wx.switchTab({
url: "/pages/index/index",
});
9、IOS與安卓樣式兼容問題
一、[鏈接]（https://blog.csdn.net/orichisonic/article/details/49123697)
CSS3 Box-sizing屬性以及解決兼容性的一些做法
二、鏈接]（https://blog.csdn.net/weixin_43794749/article/details/106832123）
小程序頁面在ios出現(xiàn)橫向滾動條問題
原因：元素設(shè)置了width：100%然后又設(shè)置了margin或者padding可以撐大盒子的邊距。此時在ios就會出現(xiàn)橫向滾動條
解決給盒子加box-sizing: border-box
全局加
page, view, scroll-view, swiper, movable-area, cover-view, text, icon, rich-text,
progress, button, checkbox-group, checkbox, form, input, label, picker,
picker-view, radio-group, slider, switch, textarea, navigator, audio, image,
video, live-player, live-pusher, open-data, web-view {
box-sizing: border-box;
}
三、鏈接]（https://www.cnblogs.com/lskreno/p/12248575.html）
1.margin在IOS中失效
在頁面中元素使用margin值，在某些IOS設(shè)備下會出現(xiàn)失效的情況，而安卓機(jī)則正常顯示，此問題暫無直接的解決方案，當(dāng)前使用空DIV控制間距。
2.fixed定位問題
整個頁面的fixed定位，在ios下下拉會觸發(fā)下拉事件，但是沒有動畫效果。Android就能正常運(yùn)行
flex中使用 絕對定位，ios出現(xiàn)嚴(yán)重錯位，導(dǎo)致父級元素也會變成絕對定位，Android能達(dá)到理想效果
總而言之 盡量不用fixed
3.absolute定位問題
①使用absolute定位，并且寬帶設(shè)置了100% 并且設(shè)置了padding就會導(dǎo)致屏幕寬度溢出，出現(xiàn)頁面左右可以移動的bug，模擬器上是沒有問題，但是真機(jī)上是有這個問題的。這個問題讓我調(diào)試并痛苦了許久
②使用absolute并且當(dāng)前元素是flex容器這種情況在Ios下面布局不會起到左右，會出現(xiàn)所有元素轉(zhuǎn)換成了absloute并且文字錯位
③總而言之 盡量不用 absolute
- word-spacing在button中的問題
有時候在使用大按鈕的時候兩個字中間希望有段間距，但是目前沒有找到能使用的占位符，所以使用了的word-spacing加空格 這個方法來設(shè)置文字的間距，但是在iPhone6s 上兩個字中間一個空格的時候整體會向右偏，必須設(shè)置兩個空格。
5.相同代碼存在效果差異
在真機(jī)測試或者模擬器測試，總匯出現(xiàn)各種樣式上的差異，造成原因比較多，因?yàn)椴煌氖謾C(jī)呈現(xiàn)的效果或者它本身采用的技術(shù)均存在差異，最終呈現(xiàn)的效果有時候就會出現(xiàn)較大的差別。但是這些差別一般都是在可以接受的范圍。
