最終的效果圖:
代碼部分:
下面我們來(lái)繼續(xù)研究代碼部分: <view> <swiper indicator-dots="true" autoplay="true" interval="2000"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}"></image> </swiper-item> </block> </swiper> </view> 注意:swiper-item僅可放置在swiper組件中,寬高自動(dòng)設(shè)置為100%。 js部分: data:{ imgUrls: [ '/images/wx.png', '/images/vr.png', '/images/iqiyi.png' ] }, js文件中定義了一個(gè)數(shù)組,里面存放圖片的路徑 wxss代碼: swiper,swiper image { width: 100%; height: 500rpx; } 注意:輪播圖組件的寬高樣式需要設(shè)置在swiper標(biāo)簽上,官方文檔中沒(méi)有說(shuō)明,只能一個(gè)一個(gè)試,最后的結(jié)論是必須定義在swiper標(biāo)簽。 1、效果圖預(yù)覽
2、準(zhǔn)備工作
上一篇博客中完成了輪播圖部分,接下來(lái)繼續(xù)完成下面的新聞列表部分 3、wxml部分新聞列表部分整體使用flex縱向布局比較合適, 先把頁(yè)面內(nèi)的元素標(biāo)簽和類名寫(xiě)好。 <view class="post-container"> <view class="post-author-date"> <image class="post-author" src="{{item.avatar}}"></image> <text class="post-date">{{item.date}}</text> </view> <text class="post-title">{{item.title}}</text> <image class="post-image" src="{{item.imgSrc}}"></image> <text class="post-content">{{item.content}}</text> <view class="post-like"> <image class="post-like-image" src="{{item.view_img}}"></image> <text class="post-like-font">{{item.reading}}</text> <image class="post-like-image" src="{{item.collect_img}}"></image> <text class="post-like-font">{{item.collection}}</text> </view> </view> 4、wxss部分.post-container{ display: flex; flex-direction: |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)