推56論壇

 找回密碼
 立即注冊(限中文)

QQ登錄

只需一步,快速開始

    查看: 1338|回復: 0
    打印 上一主題 下一主題

    [小程序教程] 微信小程序教程(23) : 微信小程序之自定義輪播圖實例

    [復制鏈接]
    跳轉到指定樓層
    樓主
    發表于 2018-4-21 16:41:15 | 只看該作者 回帖獎勵 |倒序瀏覽 |閱讀模式

    輪播圖是大部分應用的一個常用的功能,常用于廣告投放、產品展示、活動展示等等。

    漂亮的輪播圖效果可以吸引用戶的點擊,達到推廣產品的作用。

    廢話少說,下面開始動手。

    業務需求:

    5個圖片輪番播放,可以左右滑動,點擊指示點可以切換圖片

    重點說明:

    由于微信小程序,整個項目編譯后的大小不能超過1M



    查看做輪播圖功能的一張圖片大小都已經有100+k了



    那么我們可以把圖片放在服務器上,發送請求來獲取。




    index.wxml:

    這里使用小程序提供的<swiper>組件

    autoplay:自動播放

    interval:自動切換時間

    duration:滑動動畫的時長

    current:當前所在的頁面

    bindchange:current 改變時會觸發 change 事件

    由于<swiper>組件提供的指示點樣式比較單一,另外再自定義指示點的樣式

    [html] view plain copy


    • <view class="recommend" >  
    •   <view class="swiper-container">  
    •     <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">  
    •       <block wx:for="{{slider}}" wx:key="unique">  
    •         <swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}">  
    •           <image src="{{item.picUrl}}" class="img"></image>  
    •         </swiper-item>  
    •       </block>  
    •     </swiper>  
    •     <view class="dots">  
    •       <block wx:for="{{slider}}" wx:key="unique">  
    •         <view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>  
    •       </block>  
    •     </view>  
    •   </view>  
    • </view>  




    index.wxss:

    [css] view plain copy


    • .swiper-container{  
    •   position: relative;  
    • }  
    • .swiper-container .swiper{  
    •   height: 300rpx;  
    • }  
    • .swiper-container .swiper .img{  
    •   width: 100%;  
    •   height: 100%;  
    • }  
    • .swiper-container .dots{  
    •   position: absolute;  
    •   right: 40rpx;  
    •   bottom: 20rpx;  
    •   display: flex;  
    •   justify-content: center;  
    • }  
    • .swiper-container .dots .dot{  
    •   margin: 0 10rpx;  
    •   width: 28rpx;  
    •   height: 28rpx;  
    •   background: #fff;  
    •   border-radius: 50%;  
    •   transition: all .6s;  
    •   font: 300 18rpx/28rpx "microsoft yahei";  
    •   text-align: center;  
    • }  
    • .swiper-container .dots .dot.active{  
    •   background: #f80;  
    •   color:#fff;  
    • }  




    index.js:

    [javascript] view plain copy


    • //導入js  
    • var util = require('../../utils/util.js')  
    • Page({  
    •   data: {  
    •     slider: [],  
    •     swiperCurrent: 0  
    •   },  
    •   onLoad: function () {  
    •     var that = this;  
    • //網絡訪問,獲取輪播圖的圖片  
    •     util.getRecommend(function(data){  
    •       that.setData({  
    •         slider: data.data.slider  
    •       })  
    •     });   
    •   },  
    •   //輪播圖的切換事件  
    •   swiperChange: function(e){  
    • //只要把切換后當前的index傳給<swiper>組件的current屬性即可  
    •     this.setData({  
    •       swiperCurrent: e.detail.current  
    •     })  
    •   },  
    •   //點擊指示點切換  
    •   chuangEvent: function(e){  
    •     this.setData({  
    •       swiperCurrent: e.currentTarget.id  
    •     })  
    •   }  
    • })  




    utils.js:

    [javascript] view plain copy


    • //網絡訪問  
    • function getRecommend(callback) {  
    •   wx.request({  
    •     url: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',  
    •     data: {  
    •       g_tk: 5381,  
    •       uin: 0,  
    •       format: 'json',  
    •       inCharset: 'utf-8',  
    •       outCharset: 'utf-8',  
    •       notice: 0,  
    •       platform: 'h5',  
    •       needNewCode: 1,  
    •       _: Date.now()  
    •     },  
    •     method: 'GET',  
    •     header: {'content-Type': 'application/json'},  
    •     success: function(res){  
    •       if(res.statusCode == 200){  
    •         callback(res.data);  
    •       }  
    •     }  
    •   })  
    • }  
    •   
    • module.exports = {  
    •   getRecommend: getRecommend  
    • }  




    運行:



    推56論壇 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與推56論壇立場無關
    2、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
    3、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
    4、如本帖侵犯到任何版權問題,請立即告知本站,本站將予與清除侵權內容或刪除該帖子并致以最深的歉意
    5、推56論壇管理員和版主有權不事先通知發貼者而刪除本文

    本版積分規則

    關閉

    推56站長論壇推薦上一條 /1 下一條

    站長QQ
    在線咨詢
    咨詢熱線
    QQ:405327411

    QQ|免責聲明|小黑屋|站長論壇 ( 豫ICP備11018337號-5 )

    推56論壇(www.fuibch.live)站長論壇 SEO論壇 網絡營銷論壇 新手站長論壇 網絡推廣論壇 站長社區 站長網

    Powered by Discuz! X3.4 Licensed

    ©2001-2013 Comsenz Inc.

    快速回復 返回頂部 返回列表
    3分赛车计划软件 广西快乐双彩走势图表 上海时时彩 柳州麻将 街机竞技捕鱼破解版 棋牌娱乐游戏 斗牛棋牌玩法说明 湖北快3购买 青海十一选五开奖结果 福彩湖北30选5走势图 球探网足球即时比分 广东闲来麻将群二维码 加拿大快乐8是真的吗