xiaogang

ColorUI 源代码
2026-06-08 15:23:17 +08:00 · 2018-06-19 21:21:54 +08:00
parent 9e6720d0dc
commit 3834693e84
114 changed files with 4477 additions and 0 deletions
@@ -0,0 +1,41 @@
+// pages/document/slider/slider.js
+Page({
+  data: {  
+    scrollInto: 0,
+    scrollList: [
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '1' },
+      { id: '2' },
+      { id: '3' },
+      { id: '4' },
+      { id: '1' },
+      { id: '2' }]
+  },
+  scrollLeft: function (e) {
+    var into = this.data.scrollInto;
+    var length = this.data.scrollList.length;
+    if (into > 0) {
+      this.setData({
+        scrollInto: into - 1,
+      })
+    } else {
+      this.setData({
+        scrollInto: length - 3,
+      })
+    }
+  },
+  scrollRight: function (e) {
+    var into = this.data.scrollInto;
+    if (into < this.data.scrollList.length - 3) {
+      this.setData({
+        scrollInto: into + 1,
+      })
+    } else {
+      this.setData({
+        scrollInto: 0,
+      })
+    }
+  },
+})
@@ -0,0 +1 @@
+{}
@@ -0,0 +1,36 @@
+<view class="bar">
+  <view class='ml-sm iconfont icon-titles success-text'>全屏限高轮播</view>
+</view>
+<swiper class='swiper-screen' indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ff6600">
+  <swiper-item wx:for="1234">
+    <image src="http://image.weilanwl.com/img/4x3-{{index+1}}.jpg" mode='aspectFill' />
+  </swiper-item>
+</swiper>
+
+<view class="bar mt-sm">
+  <view class='ml-sm iconfont icon-titles success-text'>带背景图轮播</view>
+</view>
+<swiper class='swiper-bg' indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-active-color="#ff6600">
+  <swiper-item wx:for="124">
+    <view class='shadow-alice'>
+      <image src="http://image.weilanwl.com/img/4x3-{{index+2}}.jpg" mode='aspectFill' />
+    </view>
+  </swiper-item>
+</swiper>
+
+<view class="bar mt-sm">
+  <view class='ml-sm iconfont icon-titles success-text'>多图轮播(scroll-view)</view>
+</view>
+<view class='scroll-bar'>
+  <view class='scroll-left' bindtap='scrollLeft'>
+    <text class='iconfont icon-back'></text>
+  </view>
+  <scroll-view scroll-x class='scroll-list-box' scroll-into-view="in-{{scrollInto}}" scroll-with-animation>
+    <view class='scroll-list'>
+      <view class='scroll-item' id="in-{{index}}" style='background-image:url(http://image.weilanwl.com/img/4x3-{{item.id}}.jpg)' wx:for="{{scrollList}}"></view>
+    </view>
+  </scroll-view>
+  <view class='scroll-right' bindtap='scrollRight'>
+    <text class='iconfont icon-right'></text>
+  </view>
+</view>
@@ -0,0 +1,69 @@
+page {
+  background: #f1f1f1;
+}
+
+.swiper-screen {
+  height: 460rpx;
+}
+
+.swiper-screen image {
+  width: 100%;
+  display: block;
+  height: 460rpx;
+  margin: 0;
+}
+
+.swiper-bg {
+  background-image: url(http://image.weilanwl.com/img/swiper-bg.png);
+  background-size: cover;
+  height: 500rpx;
+}
+
+.swiper-bg swiper-item {
+  height: 400rpx;
+}
+
+.swiper-bg swiper-item view {
+  margin: 40rpx;
+}
+
+.swiper-bg image {
+  width: 100%;
+  display: block;
+  height: 400rpx;
+  margin: 0;
+  border-radius: 10rpx;
+}
+
+.scroll-bar {
+  background: #fff;
+  display: flex;
+}
+
+.scroll-left, .scroll-right {
+  width: 75rpx;
+  text-align: center;
+  line-height: 150rpx;
+  font-size: 36rpx;
+  color: #666;
+}
+
+.scroll-list-box {
+  height: 150rpx;
+  width: 600rpx;
+}
+
+.scroll-list {
+  height: 150rpx;
+  white-space: nowrap;
+}
+
+.scroll-item {
+  display: inline-block;
+  width: 200rpx;
+  height: 150rpx;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 170rpx;
+  background-color: #fff;
+}