用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

21

帖子

260

积分

架构狮

Rank: 3Rank: 3

积分
260
2017-1-10 13:59:06 maorongrong开发者认证 架构狮 楼主 46834
先吐槽下:
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
    })
}
})


效果预览: 1234.gif

项目地址及下载
https://github.com/linima/wx_qqmusic(欢迎star)

wx_qqmusic-master.zip (34.66 KB, 下载次数: 65)

评分

参与人数 1原创 +1 浮云 +20 收起 理由
天下雪 + 1 + 20 赞一个!

查看全部评分

原来是你的demo,
本帖最后由 maorongrong 于 2017-1-10 14:17 编辑

我说怎么我的demo被放到这里了,原来是管理员,感谢推到推荐阅读。 麻烦把动态图更新下,刚才忘了提交到github了
maorongrong 发表于 2017-1-10 14:16
我说怎么我的demo被放到这里了,原来是管理员,感谢推到推荐阅读。 麻烦把动态图更新 ...

那么问题来了,我下载最新demo,轮播图原点样式还是原样啊   
天下雪 发表于 2017-1-10 14:24
那么问题来了,我下载最新demo,轮播图原点样式还是原样啊

请重新下载
QQ截图20170110142749.png

终于看到了。。。这种花样,新同学们一定很喜欢
同学,麻烦一下你,点击一下帖子右侧的生成文章 QQ截图20170110143553.png

然后选择新手教程,然后提交,剩下的我来编辑,发到首页去
2017-1-10 16:08:57 chenxi 攻城狮
7#
学习下。
眉微微眯为我么
666666
学会习,天天向上
2017-1-11 17:05:44 天灯 攻城狮
12#
sss
请问怎么加上左右切换的箭头
挺好的
1234下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册