商城系统没花多少时间在UI美化上,主要实现了微信小程序校园二手商城的一些主要功能。界面是丑了点,但是在开发中学习到了很多的东西。还是非常值得的。
下面来看主界面的主要布局代码,主要知识点是html+css,如果懂html+css的话,布局什么的就很简单。
下面来看代码吧
<view>
<view class="search">
<view class="ipt-box">
<text class="iconfont icon-icon_search"></text>
<input class="search-ipt" value="{
{searchKey}}" bindinput="saveSearchKey" maxlength="20" type="text" placeholder="请输入查询内容" />
</view>
<button bindtap="toSearchList" class="search-btn">搜索</button>
</view>
<swiper
class="home-swiper"
autoplay="true"
interval="3000"
duration="500"
>
<block wx:for="{
{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{
{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
<view class="main">
<!-- 近期热门 -->
<view class="hot">
<view class="h-tag">
<view class="v-line"></view>
<text class="tit">热门分类</text>
</view>
<view class="classify">
<view bindtap="toClassifyList" data-classify="{
{item.txt}}" wx:for="{
{classify_list}}" wx:key="{
{item.txt}}" class="classify-item">
<view class="img_box">
<image src="{
{item.icon}}" />
</view>
<text class="txt">{
{item.txt}}</text>
</view>
</view>
</view>
<!-- 信息列表 -->
<view class="main-msg">
<!-- 导航条 -->
<view class="tab">
<view bindtap="changeChoice" data-tag="1"