WeChat------微信小程序相关动态页面代码总结

效果图：

index.wxml

<!-- wxml -->

<view class="page" data-weui-theme="{{theme}}">
    <view class="page__hd">
        <view class="page__title">WeUI</view>
        <view class="page__desc">WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="kind-list">
            <block wx:for="{{list}}" wx:key="id">
                <view class="kind-list__item">
                    <view id="{{item.id}}" class="weui-flex kind-list__item-hd {{item.open ? 'kind-list__item-hd_show' : ''}}" bindtap="kindToggle">
                        <view class="weui-flex__item">{{item.name}}</view>
                        <image class="kind-list__img" src="images/icon_nav_{{item.id}}.png"></image>
                    </view>
                    <view class="kind-list__item-bd {{item.open ? 'kind-list__item-bd_show' : ''}}">
                        <view class="weui-cells {{item.open ? 'weui-cells_show' : ''}}">
                            <block wx:for="{{item.pages}}" wx:for-item="page" wx:key="*this">
                                <navigator url="{{page}}/{{page}}" class="weui-cell weui-cell_access">
                                    <view class="weui-cell__bd">{{page}}</view>
                                    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
                                </navigator>
                            </block>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
    <view class="page__ft" bindtap="changeTheme">
        <image src="images/icon_footer.png" style="width: 84px; height: 19px;"></image>
    </view>
</view>

 index.wxss

/* wxss */

/*!
 * WeUI v2.4.4 (https://github.com/weui/weui-wxss)
 * Copyright 2021 Tencent, Inc.
 * Licensed under the MIT license
 */
.weui-flex {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
}

.weui-cells {
    margin-top: 0;
    opacity: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: .3s;
    transition: .3s
}

.weui-cells:after,
.weui-cells:before {
    display: none
}

.weui-cells_show {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.weui-cell:before {
    right: 15px
}

.kind-list__item {
    margin: 10px 0;
    background-color: var(--weui-BG-2);
    border-radius: 2px;
    overflow: hidden
}

.kind-list__item:first-child {
    margin-top: 0
}

.kind-list__img {
    width: 30px;
    height: 30px
}

[data-weui-theme=dark] .kind-list__img {
    -webkit-filter: invert(100) hue-rotate(180deg);
    filter: invert(100) hue-rotate(180deg)
}

.kind-list__item-hd {
    padding: 20px;
    -webkit-transition: opacity .3s;
    transition: opacity .3s
}

.kind-list__item-hd_show {
    opacity: .4
}

.kind-list__item-bd {
    height: 0;
    overflow: hidden
}

.kind-list__item-bd_show {
    height: auto
}

index.js

// js

Page({
    mixins: [require('../mixin/themeChanged')],
    data: {
        list: [
            {
                id: 'form',
                name: '表单',
                open: false,
                pages: ['button', 'input', 'form', 'list', 'slideview', 'slider', 'uploader']
            },
            {
                id: 'layout',
                name: '基础组件',
                open: false,
                pages: ['article', 'badge', 'flex', 'footer', 'gallery', 'grid', 'icons', 'loading', 'loadmore', 'panel', 'preview', 'progress']
            },
            {
                id: 'feedback',
                name: '操作反馈',
                open: false,
                pages: ['actionsheet', 'dialog', 'half-screen-dialog', 'msg', 'picker', 'toast', 'top-tips']
            },
            {
                id: 'nav',
                name: '导航相关',
                open: false,
                pages: ['navigation-bar', 'tabbar']
            },
            {
                id: 'search',
                name: '搜索相关',
                open: false,
                pages: ['searchbar']
            }
        ]
    },
    kindToggle: function (e) {
        var id = e.currentTarget.id, list = this.data.list;
        for (var i = 0, len = list.length; i < len; ++i) {
            if (list[i].id == id) {
                list[i].open = !list[i].open
            } else {
                list[i].open = false
            }
        }
        this.setData({
            list: list
        });
    },
    changeTheme: function() {
        console.log(this.data);
        getApp().themeChanged(this.data.theme === 'light' ? 'dark' : 'light');
    }
});