Day7-微信小程式實戰-交友小程式首頁UI

gogocj發表於2020-06-19
微信小程式UI

一般都是直接用微信提供的元件來進行佈局的

在小程式中最好少用id，儘量用class

輪播圖就是直接用swiper

直接在微信開發者文件裡面-》元件-》swiper-》示例程式碼

<swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>

①其中indicator-dots是設定輪播圖上面那個點的樣式 ，用true就是直接寫死，也就是保留這個輪播圖　　 

②是否可以輪播通過autoplay

③interval是輪播的時間、duration是間隔的時間

下面進行測試，通過在網上找了三張圖片，然後在index.js裡面設定了一個imgUrls的陣列，把這三張圖片的連結都放進去

在index.js中data域裡面

  data: {
    imgUrls: ['http://pic16.photophoto.cn/20100806/0005018388944073_b.jpg',
      'http://k.zol-img.com.cn/dcbbs/19063/a19062586_01000.jpg',
      'http://k.zol-img.com.cn/dcbbs/19063/a19062586_01000.jpg'
      ]
  
  },

然後就可以在index的html裡面呼叫了，通過wx:for來遍歷這個陣列裡面的每一個元素，最好就是新增上wx:key來指定下標index

通過給image提供item作為src連結

效果圖：

 

 

 

 

但是可以看到，這邊都是沒在中心區域的，然後偏離的了

==所以這個時候就要對輪播圖進行樣式的新增，讓他的位置變得正常起來即可了

.index-swiper{margin: 20rpx;}
.index-swiper image{
  width: 100%;
}

通過給整個輪播圖的margin進行設定，然後給輪播圖裡面的每一個圖片都設定了寬度

效果圖：

 

 之後讓這個圖片更好看一點的話，就可以給這個圖片設定圓角的，

 

 搞了圓角之後會發現上面是圓角的，但是下面還是方的，這個時候一般都是因為在wxml中就給圖片設定了寬度和高度，才出現這個情況，所以要把

提前設定的寬度和高度都高掉，然後還要通過wxss把這個輪播圖的高度也定死了，然後把輪播圖也加上圓角，和溢位隱藏

.index-swiper{margin: 5rpx 20rpx 5px;
height: 300rpx;
border-radius: 10rpx;
 overflow: hidden;}
.index-swiper image{
  width: 100%;
  border-radius: 10rpx;
  overflow: hidden;
}

效果圖：

就達到了四個角都是圓角的效果了

如果是要對這個輪播圖銜接滑動得話，也可以通過circular來設定得

circular="{{true}}"

 2、下面就是對兩個 推薦  最新進行排榜了】

直接定義兩個view然後放在一個大的view裡面

<view class="index-tab">
        <view>推薦</view>
        <view>最新</view>
      </view>

這種佈局在wx裡面一般都是直接用flex佈局會好得多的

先對整個大的 定義為flex佈局

之後對裡面兩個view的專案進行flex=1  也就是寬度自適應，=1的時候由flex佈局的知識，他們就會變大，由於都等於=1

所以會把全部的空格都佔滿，然後佔的空間也都是50%的

然後還要把裡面的文字進行居中

.index-tab{
  display:flex;
}
.index-tab view{
  flex:1;
}

效果圖

 

 

 由於這個是選項框，也就是選擇其中一個就可以看到對應的內容

所以就要加上選中的樣式會變成什麼樣的，通過.active來新增樣式（這裡是給其中一個寫死了）

 

之後再對這個padding和margin撐出來，好看點，然後再把選中的文字變成是紅色的即可了

得到的效果就是：

 

 

 3、之後就是對列表中的推薦或者最新使用者的資訊顯示了

.index-list{display: flex;
            flex-wrap: wrap;
            /* //z自動轉行} */
}
.index-list-item{width: 50%;}
.index-list-item image{
  width: 90%;
  height: 250rpx;
  margin: 0 auto;
display: block;
  }

通過flex佈局 ，為了抗議主動換行，就抗議用wrap

為了讓每張圖片都抗議居中，通過

  margin: 0 auto;
display: block;
得到的效果：

 

把圖片搞好了，還要把點贊等等資訊也加上才行了

注意：在wx中text標籤其實和html中的span很像，就是用於考研放一行的非塊級標籤

 

只是給了這個暱稱和點贊部分進行了如下設定發現，兩個部分都沒在兩邊放著

.index-list-text{
  /* 讓使用者暱稱和點贊部分分開在兩邊即可了 */
  display:flex;
  justify-content:space-between;
}

效果圖：

 

 

 這是因為這整個部分用的是text（文字的話就不行了，要用塊級的view，並且還要給這個view設定寬度

<text class="index-list-text">
          <!-- 暱稱 -->
          <text>小喵喵</text>
          <text>
          <!-- 點贊圖示 -->
              <text class="iconfont icondianzan"></text>
          <!-- 點贊數 -->
              <text>100</text>
          </text>
          </text>
.index-list-text{
  width: 90%;
  /* 讓使用者暱稱和點贊部分分開在兩邊即可了 */
  display:flex;
  justify-content:space-between;
}

才行的

效果圖：

 

然後還發現了這個暱稱【小喵喵】跑到左邊去了，所以就要對這個view 中的文字text進行居中，即可

.index-list-text{
  width: 90%;
  /* 讓使用者暱稱和點贊部分分開在兩邊即可了 */
  display:flex;
  margin: 0 auto;
  justify-content:space-between;
}

 

 【小細節】在列表中的圖片，其實是不成比例的，導致被壓縮，可以在wx開發文件-》元件-》媒體元件-》image

 

使用下面的aspectfill 來保持橫縱比縮放了

 

相關文章