小程式輪播圖總結

来源:https://www.cnblogs.com/share-record/archive/2020/01/28/12238861.html

wxml內容: <view class="container"> <navigator class="search"> <icon type="search" size="13"></icon>搜索 </navigator> <view class="banner_box"> <swiper cla ...


wxml內容:

<view class="container">
  <navigator class="search">
    <icon type="search" size="13"></icon>搜索
  </navigator>

  <view class="banner_box">
    <swiper class="banner" indicator-dots="true" indicator-color="rbag(255,255,255,0.3)" indicator-active-color="#42bd56" autoplay="true"
circular="true" style="height:{{swiperHeight}}"> <block wx:for="{{bannerData}}"> //從'indicator-dots'開始分別是設置輪播圖的圓點,圓點顏色,輪播到某圖時圓點的顏色,自動播放,圓點出現,swiperHeight:圖片的高度
          <swiper-item>
            <navigator>
              <image mode="widthFix" src="{{item.banner_img}}" bindload="imgLoad"></image>  //bindload:圖片載入後觸發的時間 ,這裡要設置mode="widthFix"

 

 


</navigator> </swiper-item> </block> </swiper> </view> </view>

js內容:

//獲取應用實例
const app = getApp()

Page({
  data: {
    bannerData: [{ id: 1, banner_img: "https://img3.doubanio.com/view/photo/l/public/p2563815623.webp" }, { id: 2, banner_img: "https://img3.doubanio.com/view/photo/l/public/p2564461744.webp" }, { id: 3, banner_img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2563630521.webp" }
    ],
   
    swiperHeight:0
  },

  
  onLoad: function () {
    
  },

  imgLoad:function(e){
    console.log(e.detail);
    var winWidth=wx.getSystemInfoSync().windowWidth //獲取屏幕寬度

    var imgWidth=e.detail.width; //圖片寬度
    var imgHeight = e.detail.height; //圖片寬度
    this.setData({
      swiperHeight: winWidth*imgHeight/imgWidth+'px'  
    })


  }
})

css內容:

/*搜索*/
.search{
  width: 90vw;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  margin: 30rpx auto;
  background-color: #f7f7f7;
  color: #bbb;
}

.search icon{
  margin-right: 12rpx;
}

.banner navigator{
  width: 100%;
  height: 100%;
}

 .banner image{
   width: 100%;
   height: 100%;
 }

結果:

 

 

 

 

您的分享是我們最大的動力!

更多相關文章
  • 最近小編自己一個人在負責一個項目的後臺開發,其中有一部分是統計相關的功能,所以需要一些排序或者分組的操作,之前這種操作小編覺得還是比較麻煩的,雖熱有一些現成的工具類,但是工具類的寫法也是比較複雜的,但是如果使用java8 stream流的話就比較簡單了,並且代碼量會大大的減少,下麵總結幾個對map的 ...
  • ``` package com.kflh.boxApi.utils.util; import java.math.BigDecimal; /** * @program: BoxApi * @description: 計算浮點數 * @author: eterntiyz * @create: 2019... ...
  • 解析案例 參考 fastJson對於json格式字元串的解析主要用到了一下三個類: JSON:fastJson的解析器,用於JSON格式字元串與JSON對象及javaBean之間的轉換。 JSONObject:fastJson提供的json對象。 JSONArray:fastJson提供json數組 ...
  • 可變參數 可變參數的特點: 那麼可不可以使用多個可變參數作為入參呢?答案是不可以的,原因跟上一個錯誤差不多,這種可變參數需要放到最後一個入參,多個可變參數,不可能都最為最後一個入參。相較於String[]這種形式的入參,我理解的優勢大概就是可以多個String傳入,也可以Sting[]傳入,就是te ...
  • 1.迭代遍歷 2.for迴圈遍歷: 3.優點還體現在泛型 假如 set中存放的是Object ...
  • ``` 包裝類型間的相等判斷應該用equals,而不是'!=' Inspection info: 所有的包裝類對象之間值的比較,全部使用equals方法比較。 說明:對於Integer var=?在-128至127之間的賦值,Integer對象是在IntegerCache.cache產生,會復用已有... ...
  • 數組轉換為集合 採用java中集合自帶的asList()方法就可以完成轉換了 特別註意: == 因為,Arrays.asList()方法轉換成的List集合類是java.util.Arrays.ArrayList下麵的,它是java.util.Arrays類中自己定義的一個內部類,沒有實現具體的ad ...
  • 關於java中遍歷map具體哪四種方式,請看下文詳解吧。 方式一 這是最常見的並且在大多數情況下也是最可取的遍歷方式。在鍵值都需要時使用。 方法二 在for each迴圈中遍歷keys或values。 如果只需要map中的鍵或者值,你可以通過keySet或values來實現遍歷,而不是用entryS ...
一周排行
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/8135083.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第九個模式--訪問者模式。如果按老規矩,先從名稱上來看這個模式,我根本不能獲得任何對理解該模式有用的信息, 而且這個 ...
  • 微信公眾號:【 "Dotnet9的博客" 】,網站:【 "Dotnet9" 】,問題或建議:【 "請網站留言" 】, 如果對您有所幫助:【 "歡迎贊賞" 】。 開源C WPF控制項庫系列: "(一)開源C WPF控制項庫《MaterialDesignInXAML》" "(二)開源C WPF控制項庫《Pan ...
  • 如今,當談到 WPF 時,我們言必稱 MVVM、框架(如 Prism)等,似乎已經忘了不用這些的話該怎麼使用 WPF 了。當然,這裡說的不用框架和 MVVM,並不是說像使用 Winform 那樣使用 WPF,而是追本溯源,重識 WPF 與生俱來的綁定和命令的風采。 ...
  • 本筆記摘抄自:https://www.cnblogs.com/PatrickLiu/p/8176974.html,記錄一下學習過程以備後續查用。 一、引言 今天我們要講行為型設計模式的第十個模式--備忘錄模式,先從名稱上來看。備忘錄模式可以理解為對某個對象的狀態進行保存,等到需要恢復的時 候,可以從 ...
  • 前言 在兩年多以前就聽聞 Blazor 框架,是 .Net 之父的業餘實驗性項目,其目的是探索 .Net 與 WebAssembly 的相容性和應用前景。現在這個項目已經正式成為 Asp.Net Core 框架的一部分,公開了預覽版,官方教程也基本寫好上線了。就著這個機會,順便體驗一下這個框架用起來 ...
  • .NET web開發者在開發過程中,一定都踩過的坑,明明修改了js文件,可是部署到生產環境,客戶反饋說:“還是報錯啊”。。然後一臉懵逼的去伺服器上看文件,確實已經更新了。有經驗的coder可能就想到了,肯定是客戶端瀏覽器緩存搞的鬼。 此時會告訴客戶,請Crtl+F5刷新一下,這時,客戶會說:“Ctr ...
  • 哈嘍..大家好 很久沒有更新了,今天就來一篇最近開發用到的功能,那就是中英文切換,這個實際上也不是高大上,先說一下原理,在.NET Core框架中給我們提供了全球化的類,叫做Localization,其官方的文檔地址傳送門。 在我的項目中,我是這樣操作的,你想用別的方式,也可以看文檔自己去搞。這個已 ...
  • WPF允許使用Image元素顯示點陣圖。然而,按這種方法顯示圖片的方法完全是單向的。應用程式使用現成的點陣圖,讀取問題,併在視窗中顯示點陣圖。就其本身而言,Image元素沒有提供創建和編輯點陣圖信息的方法。 這正是WriteableBitmap類的用武之地。該類繼承自BitmapSource,BitmapS ...
  • 記錄LINQ學習過程。 概要 LINQ是一種“語言集成”的查詢表達式,使用LINQ可以智能提示和進行類型檢查。C#里可以編寫的LINQ查詢有SQL資料庫、XML文檔、ADO.NET數據集、支持IEnumerable和IEnumerable的對象。使用LINQ,可以簡單對數據源進行分組、排序、篩選。有 ...
  • 這兩天複習了下Request以及Response部分的內容。 主要內容 1. HTTP協議:響應消息 2. Request對象 3. Response對象 4. ServletContext對象 HTTP: 概念:Hyper Text Transfer Protocol 超文本傳輸協議 傳輸協議:定 ...
x