Explorar o código

调整首页banner尺寸和详情页商品图片尺寸

baolei hai 2 meses
pai
achega
0aca18ec28

+ 6 - 2
pages/index/index.wxss

@@ -16,11 +16,15 @@ page {
 }
 .banner .banner-item {
   border: 1px solid #dfefec;
-  width: 100%;
-  height: 310rpx;
+  width: 665rpx;
+  height: 308rpx;
   display: block;
   border-radius: 25rpx;
 }
+.bannerSwiper {
+  width: 100%;
+  height: 100%;
+}
 .banner .banner-item .bannerImg {
   width: 100%;
   height: auto;

+ 9 - 1
pages/prodDetail/prodDetail.js

@@ -7,7 +7,7 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    // swiperHeight : "height: 250px",
   },
   // 获取商品详情
   getProdDetail(e){
@@ -50,12 +50,20 @@ Page({
   onLoad(options) {
     let prod = JSON.parse(decodeURIComponent(options.prod));
     this.getProdDetail(prod);
+
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
+    // wx.createSelectorQuery().select(".box").boundingClientRect(rect=> {
+    //   const swiperWidth = rect.width;
+    //   const calcHeight = swiperWidth * (955 / 750);
+    //   console.log(swiperWidth + " | "+  calcHeight);
+    //   this.setData({ swiperHeight: `height: ${calcHeight}px`});
+
+    // }).exec();
 
   },
 

+ 2 - 2
pages/prodDetail/prodDetail.wxml

@@ -1,12 +1,12 @@
 <!--pages/prodDetail/prodDetail.wxml-->
 <view>
     <!-- banner -->
-    <swiper class="swiper" indicator-dots="{{true}}" indicator-color="#FFFFFF" 	indicator-active-color="#CCCCCC" autoplay circular>
+    <swiper class="swiper" indicator-dots="{{true}}" indicator-color="#FFFFFF" indicator-active-color="#CCCCCC" autoplay circular >
         <block wx:for="{{prodDetail.prodPicList}}" wx:key='index'>
             <swiper-item class="swiperItem">
                 <image class="banner" src="{{item.picUrl}}" mode="widthFix"/>
             </swiper-item>
-       </block>
+      </block>
     </swiper>
 
     <!-- 商品信息 -->

+ 6 - 1
pages/prodDetail/prodDetail.wxss

@@ -1,9 +1,14 @@
 /* pages/prodDetail/prodDetail.wxss */
+.box {
+  width: 100%;
+}
 .swiper{
     width: 100%;
-}
+    height: 995rpx;
+} 
 .swiperItem{
     width: 100%;
+    height: 100%;
 }
 .swiperItem .banner{
     width: 100%;