Wetypecho小程序改UI

in 首页热点技术分享 with 1 comment

[post cid="22" /]
小程序演示


WeTypecho微信小程序由成都第七帅开发,小程序UI由长夜无垠,伴影而眠编写.

修改项目教程

P.S以下修改代码都是大致位置

顶部轮播图显示规则

 <swiper class="index_swiper" autoplay='true' duration= "200" interval="3000" circular="True" previous-margin="30rpx" next-margin="30rpx" >
        <block wx:key="id" wx:for="{{swipelist}}">
        <swiper-item class="m_full" style="background-color: transparent;" >
            <navigator class="navigator_item" hover-class="navigator-hover" url="../detail/detail?item={{item.cid}}" style="background-image:url({{item.thumb}});background-size:100000px 100000px;">
            <image src="{{item.thumb}}"style="height:78%;width:60%;display:block;margin:0 auto;border-radius:999px;box-shadow:0px 0px 5px #f5f5f5;"></image>
            <view style="height:50px;margin-left:0px;margin-right:0px;margin-top:200px;background:#ffffff;border-radius: 0px 0px 13px 13px;position:fixed;bottom:15rpx;left:15rpx;right:15rpx;opacity:1;">
           <text style="display:block;text-align:center;font-size:17px;font-weight:600;letter-spacing:0rpx;">{{item.title}}</text>
            </view>
            </navigator>
        </swiper-item>
        </block>
    </swiper>
</view>
<view class="stickyClass scroll_box"id="affix">
    <scroll-view class="scroll-view_x" scroll-with-animation="True" scroll-into-view="{{current_position}}" scroll-x style="width: auto;overflow:hidden;">
    <block wx:for="{{allcatslist}}" wx:key="item">
        <view id="{{item.id_tag}}" class="item_list {{item.active? 'active':''}}" bindtap="changeCat" data-mid="{{item.mid}}">
        {{item.name}}
        </view>
    </block>
    </scroll-view>
</view>
<swiper style="margin:3px; height:{{postheight}}" bindchange="change_finish" duration= "200" current="{{current_cat}}" circular="True" indicator-color = 'rgba(0, 0, 0, 0)' indicator-active-color = 'rgba(0, 0, 0, 0)' indicator-dots="false" lower-threshold="50">
<block wx:for="{{allcatpostlist}}" wx:key="id" wx:for-item="item_cat">
<swiper-item  style="background-color: #f5f5f5;height:100%;">
<view class="classify">
    <scroll-view class="classify_detail" scroll-y="false" scroll-with-animation="true">
        <view class="children">
        <block wx:key="id" wx:for="{{item_cat}}">
        <navigator class="nav_postlist_item"  hover-class="navigator-hover" url="../detail/detail?item={{item.cid}}">
            <view class="view_postlist_item" >
                <view class="view_catpost" >
                    <image class="image_cat_thumb"  mode="aspectFit" src="{{item.thumb[0].str_value}}"/>
                    <text class="image_cat_item_title" >{{item.title}}</text>
                    <view style="margin-left: 80px;" >
                        <image class="listpg_first_img" src="../../resources/time.png"></image>
                        <text class="list_text_view" >{{item.posttime}}</text>
                        <image class="list_img_view" src="../../resources/comments.png"></image>
                        <text class="list_text_view">{{item.commentsNum}}</text>
                        <image class="list_img_view" src="../../resources/view.png"></image>
                        <text class="list_text_view">{{item.views}}</text>
                        <image class="list_img_view" src="../../resources/like.png"></image>
                        <text class="list_text_view">{{item.likes}}</text>
                    </view>
                </view>
            </view>
        </navigator>
        </block>
        </view>
    </scroll-view>
</view>
</swiper-item>
</block>
</swiper>
.m_full {
        width: 100%;
        height: 100%;
}
.navigator_item {
        height: calc(100% - 30rpx); 
        position: relative;
        
        flex-direction: column;
        align-items: flex-end;
        background-color: rgb(122, 122, 122);
        background-position: 50% 0%;
        margin: 15rpx 15rpx 15rpx 15rpx;
        border-radius: 30rpx;
        box-shadow: 0px 0px 7px #888888;
}
.index_swiper {
        height: 540rpx;
}

卡片式布局

分类栏,直接改style

.stickyClass{
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index:999;
}
.scroll_box{
        margin: 3px;
        overflow: hidden;
        padding: 20rpx 20rpx 20rpx;
        background: #ffffff;
        border-radius: 10px;
        }
.active{
        font-size: 14px;
        padding-bottom: 12rpx;
        border-bottom: 6rpx solid #0f9d58;
        background: #ffffff;
        color: #0f9d58;
        font-weight: bold;
}
.item_list{
        width: auto;
        margin-right: 23rpx;
        display: inline-block;
        font-size: 29rpx;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 200;
}

文章列表

这里添加了原来不存在的style,由于不存在class……

<swiper style="margin:3px; height:{{postheight}}" bindchange="change_finish" duration= "200" current="{{current_cat}}" circular="True" indicator-color = 'rgba(0, 0, 0, 0)' indicator-active-color = 'rgba(0, 0, 0, 0)' indicator-dots="false" lower-threshold="50">
.nav_postlist_item {
        border-style: none none solid;
        border-bottom-width: 1px;
        border-bottom-color: #f5f5f5;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 6px;
        width: 100%;
        background-color: #ffffff;
        border-radius: 10px;

}
.view_postlist_item {
        padding-top: 5px;
        padding-bottom: 5px;
        border-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(153, 153, 153);
        border-bottom-style: none;
        border-top-style: none;
        border-right-style: none;
        border-left-style: none;
}
.view_catpost {
        width: 750rpx;
        margin-left: 1px;
        height: 133rpx;
        overflow: hidden;
}

3.列表中文章略缩图由长方形改为圆形

.image_cat_thumb {
        width: 120rpx;
        height: 120rpx;
        float: left;
        border-style: solid;
        border-radius: 90rpx;
        border-width: 0rpx;
        border-color: #ffffff;
        box-shadow: 0 0 8px rgba(48, 40, 40, 0.1);
        background-size: 100% auto;
}

整体配色,包括背景色

app.json第七行为整体背景色,推荐用这个颜色
"backgroundColor": "#f5f5f5"
顶栏颜色
"navigationBarBackgroundColor": "#ffffff"
仔细观察还会发现app.json中还包含了底栏项目的设置内容,可以自己摸索

点赞名单圆形小头像显示

.detaillikeimg {
        border-radius: 50%;
        height: 50rpx;
        width: 50rpx;
}

加入在线客服按钮

这个是我在查文档的时候偶然看到的尝试了一下成功了,便写在这儿了,即使这个功能对大部分人来说都用不上~

<view style="margin-left: 1px;">
<contact-button type="default-light" size="18" session-from="weapp">
</contact-button>
<text style="white-space:nowrap;font-size:12px;margin-left:5px;color:#cccccc">在线联系于长野,不过不一定在线哦~</text>
</view>
  1. 都那么会玩

    Reply