完成使用 API 的首页轮播图

wechat_user_type
Ge Hao 8 years ago
parent 1692d3b985
commit 91c43319c2
  1. 11
      pages/index/index.wxml
  2. 3
      pages/index/index.wxss
  3. 2
      utils/product.js

@ -1,11 +1,10 @@
<view> <view>
<scroll-view scroll-y="true" height="100%"> <scroll-view scroll-y="true" height="100%">
<swiper style="height:180px" indicator-dots="true" <swiper style="height:230px;" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
autoplay="true" interval="5000" duration="1000">
<block wx:for="{{slides}}" wx:for-item="slide"> <block wx:for="{{slides}}" wx:for-item="slide">
<swiper-item> <swiper-item>
<navigator url="{{slide.url}}"> <navigator url="{{slide.attributes.url}}">
<image src="{{slide.img}}"/> <image class="slide-img" src="{{slide.attributes.img}}" mode="aspectFit"/>
</navigator> </navigator>
</swiper-item> </swiper-item>
</block> </block>
@ -14,11 +13,11 @@
<block wx:for="{{items}}" wx:for-item="item"> <block wx:for="{{items}}" wx:for-item="item">
<navigator url="../show_product/show_product?id={{item.id}}"> <navigator url="../show_product/show_product?id={{item.id}}">
<view> <view>
<image class="head-img" src="{{item.attributes['image-url']}}" background-size="cover"></image> <image class="head-img" src="{{item.attributes['image-url']}}" mode="aspectFit"></image>
</view> </view>
<view> <view>
<text> {{item.attributes.name}} </text> <text> {{item.attributes.name}} </text>
<text> {{item.attributes.price}} </text> <text> ¥{{item.attributes.price}} </text>
</view> </view>
</navigator> </navigator>
</block> </block>

@ -1,3 +1,6 @@
.head-img { .head-img {
width: 100%; width: 100%;
} }
.slide-img {
width: 100%;
}

@ -27,7 +27,7 @@ function postBuyProduct (data) {
function getSlides () { function getSlides () {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
wx.request({ wx.request({
url: `${API_URL}/slides`, url: `${API_URL}/home_slides`,
header: { 'Content-Type': 'application/json' }, header: { 'Content-Type': 'application/json' },
success: resolve, success: resolve,
fail: reject fail: reject

Loading…
Cancel
Save