2. 程式人生 > >HBuilder webApp開發(三)輪播圖swiper

HBuilder webApp開發(三)輪播圖swiper

阿新 • • 發佈：2019-02-08
var slider = mui("#slider"); var swiperTest = null; var banerArray = new Array(); mui.init({ swipeBack:true //啟用右滑關閉功能 }); var slider = mui("#slider"); slider.slider({ interval: 500 }); /**/ mui.plusReady(function
() { swiperTest = document.getElementById('swiperTest'); getaData(); }) // 獲取資料 function getaData() { var timestamp = getDataStr(); mui.plusReady(function() { mui.ajax(baseUrl, { data: { key: ''
, typeId: '', showapi_appid: appid, showapi_sign: sign, showapi_timestamp: timestamp, page:1 }, dataType: 'json', type: 'post'
, timeout: 10000, beforeSend: function(data) { plus.nativeUI.showWaiting(); }, success: function(data) { plus.nativeUI.closeWaiting(); if (data.showapi_res_code == 0) { console.log("成功"); var dice1 = data.showapi_res_body; var dice2 = dice1.pagebean; var swpier = ''; for (var i = 0;i < 5; i ++) { var item = dice2.contentlist[i]; var temp = '<div class="swiper-slide"><img src=" ' + item.contentImg + '" id="test' + i + '"/></div>'; swpier = swpier + temp; banerArray.push(item); } swiperTest.innerHTML = swpier; var mySwiper = new Swiper('.swiper-container', { autoplay: 1000,/*自動播放時間間隔 單位ms*/ pagination : '.swiper-pagination', /*新增分頁*/ loop: true, /*開啟迴圈*/ }) /*輪播圖頁面跳轉*/ mui.each(banerArray,function(index,item){ var imgID = 'test' + index; document.getElementById(imgID).addEventListener('tap',function() { mui.openWindow({ url: 'detail.html', id: 'detail', show: { aniShow: 'slide-in-right' /*頁面切換效果*/ }, extras: { detailUrl: item.url, detailTitle: item.title }, }); }) }) } }, error: function(xhr, type, errerThrown) { mui.toast('網路異常,請稍候再試'); plus.nativeUI.closeWaiting(); } }); }); }

相關推薦

HBuilder webApp開發(三)輪播圖swiper

var slider = mui("#slider"); var swiperTest = null; var banerArray = new Array(); mui.init({ swipeBack:true /

小程式輪播圖-swiper圖片元件

  主要是程式碼也很簡單. 1.index.wxml <!--index.wxml-->       <swiper class="swiper" indicator-dots="true" autoplay="true" int

微信小程式|輪播圖swiper元件

1. 效果樣式 2. wxml程式碼 <view class="container"> <view class="page-body"> <view class="page-section page-section-spaci

(四)微信小程式--輪播圖swiper元件實現及Boolean值陷阱

輪播圖 swiper 元件 前期需要的搭建 將需要輪播的圖片儲存到/images/post/ 目錄下，沒有就建立它 在pages目錄下新建一個名為post的目錄,然後在post目錄下新建頁面所需要的4個檔案post.js, post.json, post.wxml, p

微信小程式 輪播圖 swiper圖片元件

 照著開發文件嘗試,總是能有所收穫.之前做Android開發,做個輪播圖並不簡單,用上viewpage再設定圓點,折騰一通之後還一堆bug.今天嘗試微信小程式開發做輪播圖,真是感動的淚流滿面.廢話說完

【vue 元件 mint-ui】 看了一下原始碼,給輪播圖Swiper封裝自定義跳轉的函式

mint-ui 自身提供了前一頁，後一頁的function,這裡由於專案需求,點選任意tab都可跳轉到相應的圖片,所以自己封裝了一個function:switchCar。 Usage import Mint from ‘mint-ui’;

WEB前端開發：輪播圖的實現（H5+C3+JavaScript）(JQuery)

一、輪播圖的概念 輪播圖就是一種網站在介紹自己的主打產品或重要資訊的傳播方式。說的簡單點就是將承載著重要資訊的幾張圖片，在網頁的某一部位進行輪流的呈現，從而做到讓瀏覽者很快的瞭解到網站想要表達的主要資訊。例如：淘寶，京東，等大型的購物平臺。以及各種新聞網站的頭版頭條都是用這

微信小程式之自定義輪播圖swiper dots樣式

在做微信小程式開發過程中，常用的元件就是swiper元件，通過該控制元件來實現輪播圖效果，但是swiper元件的指示點預設是小黑點，一般情況下，我們可以根據API文件中swiper的相關屬性方法進行顏色修改，如下： indicator-color='#dbdb

APP實用開發——廣告輪播圖

ViewPager是一個常用的android元件，不過通常我們使用ViewPager的時候不能實現左右無限迴圈滑動，在滑到邊界的時候會看到一個不能翻頁的動畫，可能影響使用者體驗。此外，某些區域性的ViewPager（例如展示廣告或者公告之類的ViewPage

vue移動音樂app開發學習（三）：輪播圖組件的開發

hub out webapp width eth reat slot utc -1 本系列文章是為了記錄學習中的知識點，便於後期自己觀看。如果有需要的同學請登錄慕課網，找到Vue 2.0 高級實戰-開發移動端音樂WebApp進行觀看,傳送門。 完成後的頁面狀態以及項目結構如

RN開發快速切換底部導航時react-native-swiper輪播圖元件白屏

目前react-native平臺最好用的輪播圖元件：react-native-swiper 最近在專案迭代開發測試中發現一個問題，就是在快速切換APP底部tab導航欄時，整合的輪播圖元件react-native-swiper會白屏，無法顯示圖片 如下圖所示： 通過查詢react-native-swiper的

Vue開發音樂移動端實戰(1) —header頭部元件開發和swiper輪播圖開發 以及利用JSONP獲取QQ音樂輪播圖資料

首先做專案配置 安裝babel-polyfill這是es6語法轉化（在路由中引用的）babel-fastclick 去除移動端click點選的300毫秒延遲（在路由中index.js下寫入）import fastclick from 'fastclick'//引用 fastc

angularjs中使用輪播圖指令swiper

blog var sheet ins ble 目的 文件路徑 nts script 我們在angualrjs移動開發中遇到輪播圖的功能 安裝 swiper npm install --save swiper 或者 bower install --save swiper

swiper結合ajax的輪播圖

json wrapper ont css 這就是 插件 引入 ava strong Swiper 　　是什麽：是純JavaScript打造的滑動特效插件，能夠實現觸屏焦點圖、觸屏tab切換、觸屏多圖切換等常用效果。 　　　　　　開源、免費、穩定、應用廣泛。 　　這就是swi

【解決火車輪播圖小圓點跳的問題】傳統輪播圖-三位法

ctype clear 位置 padding head doctype image class 改變 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <met

如何自定義微信小程序swiper輪播圖面板指示點的樣式

url string 但是 選擇器 idt cat horizon jpg con https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper組件是滑塊視圖容器，也就是說平常我們看到的輪播圖就可以用它來做，不過這

vue-awesome-swiper實現輪播圖

install mys cti turn fff rip 引入 save data 1.首先通過npm安裝vue-awesome-swiper，我在項目中用的是2.6.7版本 npm install [email protected] –save 2.

輪播圖組件及vue-awesome-swiper的引入

vue組件 -s -c pan target 錯誤 package size 初始 ?記在前面 你有多自律，就有多美好。 一、新建home.vue 1.上一篇為了方便展示，把頭部my-header組件放在了App.vue，現在我們刪掉App.vu

vue輪播圖插件vue-awesome-swiper的使用與組件化

css 對象類型 輪播 單獨 文件 ima some nbsp cnpm 不管是APP還是移動端網頁開發，輪播圖在大部分項目當中都是存在的，這時候如果用vue開發項目，選擇一款好的插件並且封裝好是很重要的 1. 推薦使用vue-awesome-swiper 安裝：cnpm

小程序--swiper輪播圖組件

query light developer 控制 url per size 有一個 weixin 效果圖展示： 先了解下swiper組件參數配置 輪播實現的具體步驟如下： 第一步：添加圖片素材，我這邊是放到images下，文件以及圖片名字自定義即可。 第二步：在w