HYBBS社区论坛WebApp手机模板发布

此主题耗费两年半时间打造，采用Sui Mobile框架开发，全站spa无刷新加载，采用优秀的缓存技术，大大提升网页加载速度，图片懒加载，列表分页无限滚动加载，网站采用模块化设计，你可以开发自己的小组件，在后台可对页面进行diy，目前支持首页，社区，个人中心，自定义页面，有此功能保证你的网站风格独一无二，从此告别单一庸俗的页面，消息中心更改为页面，去除ajax实时消息，并且ajax发帖，回复，登录注册。

主题自带勋章插件，用户认证插件，用户背景，红包插件，大转盘抽奖，提升用户活跃度，后续会增加更多有趣的插件，演示地址https://uer.cc 请用手机访问，目前定价99元，可以联系qq57200091购买，以下是部分功能及页面演示图：

以下是后台功能演示：

小组件：

页面自定义小组件：

帖子数据调用：

用户列表数据调用：

自定义页面：

用户认证：

认证管理：

主题配色：

红包封面：

荣誉勋章：

以下是小组件简单开发示例

 以用户列表为例首先现在后台新建组件

建立成功后打开主题目录找到App目录即可看到swiper_user目录打开可以看到以下文件

打开app_view.php文件填写你的代码即可，帖子组件和用户列表组件，数据均存储在变量$datas里面，直接foreach调用即可，每个组件都有各自的id，比如一个组件在一个页面上多次调用为了避免css样式名冲突我们可以在自定义css的时候加上$id变量如图所示：

言归正传，先自定义css：

<style>
.zero_block_{$id} {
    padding: .425rem;
    overflow: hidden;
    visibility: visible;
}
.zero_block_{$id} li {
    position: relative;
    height: auto !important;
    min-height: auto !important;
    border-radius: 0.25rem;
    background: #fbfbfb;
    overflow: hidden;
}
.zero_block_{$id} .yhzsm-tbg {
    width: 100%;
    height: 2.55rem;
}
.zero_block_{$id} li .yhzsm-zbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.55rem;
    background: rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: saturate(100%) blur(3px);
    backdrop-filter: saturate(100%) blur(3px);
    border-radius: 0.25rem 0.25rem 0 0;
}
.zero_block_{$id} .yhzsm-sjc {
    position: relative;
    top: -1rem;
    overflow: hidden;
}
.zero_block_{$id} .yhzsm-sjc .sjc-tx {
    display: block;
    text-align: center;
    position: relative;
    width: 2.45rem;
    margin: 0 auto;
}
.zero_block_{$id} .yhzsm-sjc .sjc-tx .verify-bg{
    width: .85rem;
    height: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: var(--verify-bg);
    position: absolute;
    font-size: .6rem;
    border: 1px solid #fff;
}
.zero_block_{$id} .yhzsm-sjc .sjc-tx .verify-bg{
    right: 0rem;
    bottom: 0rem;
}
.zero_block_{$id} .yhzsm-sjc .sjc-tx img {
    width: 2.45rem;
    height: 2.45rem;
    vertical-align: top;
    border-radius: 50%;
    border: 2px solid #fbfbfb;
}
.zero_block_{$id} .yhzsm-sjc .sjc-mc {
    margin: 0.15rem 0;
    overflow: hidden;
    display: block;
}
.zero_block_{$id} .yhzsm-sjc .sjc-mc h2 {
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: .72rem;
    color: #000000;
    padding: 0 0.25rem;
    text-align: center;
    font-weight: 400;
    overflow: hidden;
}
.zero_block_{$id} .yhzsm-sjc .sjc-mc p {
    height: 1rem;
    line-height: 1rem;
    font-size: .55rem;
    color: #929292;
    padding: 0 0.25rem;
    text-align: center;
    overflow: hidden;
}
.zero_block_{$id} .yhzsm-sjc .sjc-an {
    height: 1.55rem;
    line-height: 1.55rem;
    margin: 0 25%;
    margin-top: 0.35rem;
    font-size: .64rem;
    text-align: center;
    background: var(--theme-color);
    color: #fff;
    border-radius: 1.65rem;
    display: block;
}
</style>

每个样式属性上都加上id标识

html内容:

<div class="swiper-container zero_block_{$id} bg_f b-ra m-gin mb-gin swiper-initialized swiper-horizontal swiper-backface-hidden">
    <ul class="swiper-wrapper">
        {foreach $datas as $v}
        <?php
         $Auth_list = S("User_auth_list"); //认证方式列表
         $Auth = S("User_auth"); //认证列表
         $Auth_user = $Auth->find('*',['uid'=>$v['uid']]);
         $Auth_data = $Auth_list->find('*',['id'=>$Auth_user['auth_id']]);
        ?>
        <li class="swiper-slide">
            <div class="yhzsm-tbg"
                style="background: url({#WWW}{$v['avatar']['a']});background-repeat: no-repeat;background-position: center;background-size: cover;">
            </div>
            <div class="yhzsm-zbg"></div>
            <div class="yhzsm-sjc">
                <a onclick="ajax_user_card('{$v.uid}');" class="sjc-tx">
                    <img src="{#WWW}{$v['avatar']['a']}">
                    {if $Auth->has(["AND"=>['uid'=>$v['uid']]])}
                <span class="verify-bg" style="--verify-bg:{$Auth_data.color};" title="{$Auth_data.name}"><iconpark-icon
                                        name="{$Auth_data.icon}"></iconpark-icon></span>
                {/if}
                    </a>
                <a onclick="ajax_user_card('{$v.uid}');" class="sjc-mc">
                    <h2>{$v.user}</h2>
                    <p>主题{$v.threads} 积分{$v.credits}</p>
                </a>
                <a href="{php HYBBS_URL('my',$v['user'],'messinfo');}?uid={$v['uid']}" class="sjc-an">打招呼</a>
            </div>
        </li>
        {/foreach}
    </ul>
    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>
<script>
    var swiper_{$id} = new Swiper('.zero_block_{$id}',{slidesPerView:2.9,spaceBetween:5,freeMode:true,});
</script>

可见组件数据通过$datas变量调用即可，这样一个简单的滑动用户组件就开发完成了