微信小程序实践中获得的知识（2）

1、微信小程序动态添加Class样式

先用一个状态进行标识，然后对其添加样式

CSS
#fenlei_content .active {
    font-weight: bold;
}

2、微信小程序中的目录

3、倒计时时间

 // 待付款订单倒计时
    countdown() {
        // 获取订单时间
        let create_time = this.data.orderDetail.create_time.split(".")[0];
        let countdown= setInterval(() => {
            // 把订单时间转换为30分钟后的时间戳当成结束时间
            let endTime = new Date(create_time).getTime() + 30 * 60 * 1000;
            // 实时获取当前时间
            let date = new Date();
            let now = date.getTime();
            // 时间差
            let ts = endTime - now;
            //计算剩余的分钟数
            var mm = Math.floor((ts / 1000 / 60) % 60);
            //计算剩余的秒数
            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、微信小程序分类-左侧导航与右侧内容联动

①

5、当容器内容过多时有滚动条

需要添加高度

6、自定义遮罩层，当遮罩层展示时底部内容不滑动，即滑动穿透

在遮罩层上应用以下属性

注：在电脑上可能看不出效果，可以用真机调试看一下是否应用上。

catchtouchmove="{{true}}"

7、wx:if

①当判断里面的内容不等于字符串时，应该用单引号：wx:if="{{item.flag=='待付款'}}"

②wx:if;wx:elif;wx:else

③hidden:在标签上直接加入属性hidden;例如：hidden="{{true}}";

④分别什么场景使用：wx:if是直接把标签从页面结构中移除掉，当标签不是频繁的切换显示时优先使用wx:if；hidden是通过添加样式的方式来切换显示，当标签频繁的切换显示时优先使用hidden

⑤hidden属性不要和样式display一起使用

8、页面跳转方式

①关闭当前页面,跳转到下一页面

 wx.redirectTo({
     url: "/pages/paymentSuccess/paymentSuccess",
     });

②跳转到 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出现横向滚动条问题

原因：元素设置了width：100%然后又设置了margin或者padding可以撑大盒子的边距。此时在ios就会出现横向滚动条
解决给盒子加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设备下会出现失效的情况，而安卓机则正常显示，此问题暂无直接的解决方案，当前使用空DIV控制间距。
2.fixed定位问题
整个页面的fixed定位，在ios下下拉会触发下拉事件，但是没有动画效果。Android就能正常运行
flex中使用绝对定位，ios出现严重错位，导致父级元素也会变成绝对定位，Android能达到理想效果
总而言之尽量不用fixed
3.absolute定位问题
①使用absolute定位，并且宽带设置了100% 并且设置了padding就会导致屏幕宽度溢出，出现页面左右可以移动的bug，模拟器上是没有问题，但是真机上是有这个问题的。这个问题让我调试并痛苦了许久
②使用absolute并且当前元素是flex容器这种情况在Ios下面布局不会起到左右，会出现所有元素转换成了absloute并且文字错位
③总而言之尽量不用 absolute

word-spacing在button中的问题
有时候在使用大按钮的时候两个字中间希望有段间距，但是目前没有找到能使用的占位符，所以使用了的word-spacing加空格这个方法来设置文字的间距，但是在iPhone6s 上两个字中间一个空格的时候整体会向右偏，必须设置两个空格。
5.相同代码存在效果差异
在真机测试或者模拟器测试，总汇出现各种样式上的差异，造成原因比较多，因为不同的手机呈现的效果或者它本身采用的技术均存在差异，最终呈现的效果有时候就会出现较大的差别。但是这些差别一般都是在可以接受的范围。