二、UI改進(jìn)

UI一直是我的心頭病，沒(méi)辦法，強(qiáng)迫癥一出來(lái)，幾頭牛都拉不回來(lái)。不把尺寸搞得誤差在像素級(jí)根本不能讓我心安。所以這次改了幾個(gè)地方。然后感覺(jué)好多了。

代碼更新如下：

<music.wxml>

<view class="header" style="flex-direction:row;">


<swiper  class="swiper" indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" width="100" height="10">
    <swiper-item wx:for="{{imgUrls}}">
      <image src="{{item}}" class="slide-image" class="banner" mode="fullToFill"/>
    </swiper-item>
</swiper>

<view class="img">
<image src="/resources/Carly.png" class="pic" ></image>

</view>

<view class="img1">
<block wx:for="{{song}}" wx:key="id" class="audio">
<block wx:if="{{item.musicid==count}}"> 
<audio poster="{{item.poster}}" name="{{item.name}}" author="{{item.author}}" src="{{item.src}}" id="myAudio" controls="true">
<view style="display:flex;flex-direction: row;">
<button  type="primary" bindtap="audioPlay" class="button_anniu">Start</button>
<button type="primary" bindtap="audioPause" class="button_anniu">Pause</button>
<button type="primary" bindtap="audio14" class="button_anniu">To14s</button>
<button type="primary" bindtap="audioStart" class="button_anniu">Stop</button>
</view>

<view style="display:flex;flex-direction: row;">
<button type="primary" bindtap="NextMusic" class="button_anniu"> Next </button>
<button  type="primary" bindtap="LastMusic" class="button_anniu">Last</button>
</view>
</audio>
</block>
</block>
</view>



</view>

《music.wxss》

.banner{
    width: 750rpx;
    height: 80rpx;
   position: center;

}

.img{
    position: center;
    padding-left: 100rpx;
    padding-right: 100rpx;
}

.img1{
    position: center;
    padding-left: 75rpx;
    
}

.pic{
    width: 550rpx;
    height:  640rpx;

}



.button_anniu{
    width: 150rpx;
    height: 100rpx;
  margin: 50rpx auto; 
    display: flex;

}

.swiper{
    width: 750rpx;
    height: 80rpx;
    position: center;
}

效果圖，好看了點(diǎn)吧

主頁(yè)的改進(jìn)，我覺(jué)得很好看咯??！而且加了滾條，可以滾出三個(gè)圖。

《index.wxml》

<view class="index">
    <!--標(biāo)題-->

    <view class="header"  >
       <view style="flex-direction:row;"> <image class="icon" src="/resources/fuckrun.png" mode="aspectFill"/></view>

        <view class="bigTitle">Fucking Running</view>
        <view class="desc">The First Program of HustWolf and XNC</view>
    </view>

    <view class="body">
        <view class="widget">
            <block wx:for="{{pageNames}}">
                <view class="widgets__item">
                    <navigator class="navigator-hover" url="{{item.id}}/{{item.id}}">{{item.name}}</navigator>
                </view>
            </block>
        </view>
    </view>
</view>


 <scroll-view scroll-y="true" style="height: 630rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">

<image  class="pic" src="/resources/run2.png" mode="aspectFill"/>
<image  class="pic" src="/resources/run1.png" mode="aspectFill"/>
<image  class="pic" src="/resources/run0.png" mode="aspectFill"/>


</scroll-view>

看看效果咯，漂亮啊

還是需要改進(jìn)啊。沒(méi)辦法了。我現(xiàn)在是下午七點(diǎn)三十四，但是我還沒(méi)吃飯，有點(diǎn)餓！所以我待會(huì)還要走到東邊去，大概半個(gè)小時(shí)，然后再去我親愛(ài)的，親愛(ài)的韻苑大酒店吃一頓，如果有黃燜雞米飯就大運(yùn)臨頭了，沒(méi)有的話吃一份鹵鴨飯就行了。。

時(shí)間

結(jié)束語(yǔ)

小程序算是假期的一個(gè)調(diào)劑吧，不過(guò)，貌似被我成功的帶到大三下了。主要是不能持續(xù)產(chǎn)出，我會(huì)松懈，所以寒假的氛圍其實(shí)還是蠻好的。在學(xué)校就貝格忠東喜支配了。心塞，雖然效率高了不少，但是還是想家了。最想家的一次。

今天是正式開(kāi)學(xué)的第一天，我得證明下：

我這是自虐。。。每次看到都會(huì)想家。。。我不是戀家的人啊

全部功能的展示（還是以前的，這次改動(dòng)太小了 不截圖了）。飛速，可能看不清，如果有興趣請(qǐng)你看文章！

個(gè)人宣言

知識(shí)傳遞力量，技術(shù)無(wú)國(guó)界，文化改變生活！