用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

2

主題

24

帖子

329

積分

詮釋者

Rank: 4

積分
329
2017-1-10 13:59:06 maorongrong開發者認證 詮釋者 樓主 6128656
先吐槽下:
1.更新了v0.12的版本后,每次保存都彈出來一個打開文件窗口。
2.swiper組件的屬性indicator-dots,值為false時,面板指示點還是顯示。要把indicator-dots屬性直接刪掉。


下面進入正題:
默認的swiper面板指示點都是小圓點黑灰的,但這滿足不了廣大小伙伴需求,比如其他顏色的,橢圓形的,方形的等等。。。。
首先當然是要禁用掉(直接刪掉)swiper屬性indicator-dots,再用view組件模擬dots,對應的代碼如下:
[HTML] 純文本查看 復制代碼
  <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>
          <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' : ''}}"></view>
      </block>
    </view>
  </view>

然后是wxss代碼:
[CSS] 純文本查看 復制代碼
.swiper-container{
  position: relative;
}
.swiper-container .swiper{
  height: 300rpx;
}
.swiper-container .swiper .img{
  width: 100%;
  height: 100%;
}
.swiper-container .dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}
.swiper-container .dots .dot{
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  transition: all .6s;
}
.swiper-container .dots .dot.active{
  width: 24rpx;
  background: #f80;
}


再對swiper的bindchange屬性綁定對應的事件:
[JavaScript] 純文本查看 復制代碼
Page({
data: {
    slider: [
    {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000rVobR3xG73f.jpg'},
    {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000j6Tax0WLWhD.jpg'},
    {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000a4LLK2VXxvj.jpg'},
    ......
    ],
    swiperCurrent: 0,
},
swiperChange: function(e){
    this.setData({
        swiperCurrent: e.detail.current
    })
}
})


效果預覽:

項目地址及下載
https://github.com/linima/wx_qqmusic(歡迎star)

wx_qqmusic-master.zip (34.66 KB, 下載次數: 528)

評分

參與人數 5原創 +1 浮云 +24 收起 理由
w峰46 + 1 很給力!
pllp + 1
w初夏。晚43 + 1 贊一個!
freeman + 1
天下雪 + 1 + 20 贊一個!

查看全部評分

分享至 : QQ空間
24 人收藏
原來是你的demo,
有問題請在本站內搜索相應關鍵詞,假如無法解決請在綜合交流區內發帖咨詢,發帖時請提供詳細的問題描述、相關圖片及代碼。
本帖最后由 maorongrong 于 2017-1-10 14:17 編輯
天下雪 發表于 2017-1-10 14:03
原來是你的demo,

我說怎么我的demo被放到這里了,原來是管理員,感謝推到推薦閱讀。 麻煩把動態圖更新下,剛才忘了提交到github了
maorongrong 發表于 2017-1-10 14:16
我說怎么我的demo被放到這里了,原來是管理員,感謝推到推薦閱讀。 麻煩把動態圖更新 ...

那么問題來了,我下載最新demo,輪播圖原點樣式還是原樣啊   
有問題請在本站內搜索相應關鍵詞,假如無法解決請在綜合交流區內發帖咨詢,發帖時請提供詳細的問題描述、相關圖片及代碼。
天下雪 發表于 2017-1-10 14:24
那么問題來了,我下載最新demo,輪播圖原點樣式還是原樣啊

請重新下載

QQ截圖20170110142749.png (185.91 KB, 下載次數: 433)

QQ截圖20170110142749.png

終于看到了。。。這種花樣,新同學們一定很喜歡
同學,麻煩一下你,點擊一下帖子右側的生成文章

然后選擇新手教程,然后提交,剩下的我來編輯,發到首頁去
有問題請在本站內搜索相應關鍵詞,假如無法解決請在綜合交流區內發帖咨詢,發帖時請提供詳細的問題描述、相關圖片及代碼。
2017-1-10 16:08:57 chenxi 攻城獅
7#
學習~~~謝分享~~~
學習下。
眉微微瞇為我么
666666
2017-1-11 15:36:26 小咖啡 詮釋者
11#
學會習,天天向上
2017-1-11 17:05:44 天燈 攻城獅
12#
sss
請問怎么加上左右切換的箭頭
2017-1-12 13:19:49 erheng 架構獅
14#
挺好的
2017-1-12 14:33:19 hym881013 攻城獅
15#
12345下一頁
發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊
上证指数十年走势图