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

chuxuezhe   ·   发表于 1个月前   ·   模板开发

此主题耗费两年半时间打造,采用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变量调用即可,这样一个简单的滑动用户组件就开发完成了

0 Reply   |  Until 1个月前 | 600 View
LoginCan Publish Content