提交 a157018c 编写于 作者: I iotjin

add jh-swiper

上级 23a904ba
// 轮播图
Component({
/**
* 组件的属性列表
*/
properties: {
dataArr: {
type: Array,
value: []
},
activeColor: {
type: String,
value: 'white',
},
otherColor: {
type: String,
value: 'gray',
},
interval: {
type: Number,
value: 3000,
},
isCard: {
type: Boolean,
value: false,
},
currentIndex: {
type: Number,
value: 0,
},
autoplay: {
type: Boolean,
value: true,
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
onChange(e) {
this.setData({
currentIndex: e.detail.current
})
},
onClickItem(event) {
var item = event.currentTarget.dataset.item
this.triggerEvent('clickItem', item)
},
}
})
\ No newline at end of file
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<block wx:if="{{!isCard}}">
<swiper class="screen-swiper" indicator-dots="{{dataArr.length>1}}" circular="true" autoplay="{autoplay}"
interval="{{interval}}" duration="500" indicator-color="{{otherColor}}" indicator-active-color="{{activeColor}}"
bindchange="onChange" current="{{currentIndex}}">
<swiper-item wx:for="{{dataArr}}" wx:key="index" catchtap="onClickItem" data-item="{{item}}">
<image class="image" src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"
wx:if="{{item.type=='video'}}"></video>
</swiper-item>
</swiper>
</block>
<block wx:if="{{isCard}}">
<swiper class="card-swiper" indicator-dots="{{dataArr.length>1}}" circular="true" autoplay="{autoplay}"
interval="{{interval}}" duration="500" indicator-color="{{otherColor}}" indicator-active-color="{{activeColor}}"
bindchange="onChange" current="{{currentIndex}}">
<swiper-item wx:for="{{dataArr}}" wx:key="index" class="card-swiper-item" catchtap="onClickItem"
data-item="{{item}}">
<view class="{{currentIndex==index?'card-swiper-item-current':'card-swiper-item-other'}}">
<image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
<video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover"
wx:if="{{item.type=='video'}}"></video>
</view>
</swiper-item>
</swiper>
</block>
\ No newline at end of file
/* 全屏样式 */
.screen-swiper {
width: 100%;
min-height: 375rpx;
}
.image {
width: 100%;
display: block;
height: 100%;
margin: 0;
pointer-events: none;
}
/* card样式 */
.card-swiper {
height: 420rpx !important;
}
.card-swiper-item {
width: 610rpx !important;
left: 70rpx;
box-sizing: border-box;
padding: 40rpx 0rpx 70rpx;
overflow: initial;
}
.card-swiper-item-other {
width: 100%;
display: block;
height: 100%;
border-radius: 10rpx;
transform: scale(0.9);
transition: all 0.2s ease-in 0s;
overflow: hidden;
}
.card-swiper-item-current {
width: 100%;
display: block;
height: 100%;
border-radius: 10rpx;
transform: scale(0.9);
transition: all 0.2s ease-in 0s;
overflow: hidden;
transform: none;
transition: all 0.2s ease-in 0s;
}
\ No newline at end of file
......@@ -40,6 +40,7 @@
"pages/demoList/otherDemoList/other/timePicker2",
"pages/demoList/otherDemoList/other/inputPopView",
"pages/demoList/otherDemoList/other/empty",
"pages/demoList/otherDemoList/other/swiper",
"pages/demoList/UI/form",
"pages/demoList/UI/top",
"pages/demoList/UI/search",
......@@ -126,6 +127,7 @@
"jh-string-picker": "JhComponents/jh-string-picker/index",
"jh-time-picker": "JhComponents/jh-time-picker/index",
"jh-ymd-time-picker": "JhComponents/jh-ymd-time-picker/index",
"jh-swiper": "JhComponents/jh-swiper/index",
"jh-time-switch": "JhComponents/jh-time-switch/index",
"mytree": "JhComponents/mytree/index",
"van-cell": "@vant/weapp/cell/index",
......
{
"navigationBarTitleText": "jh-nav",
"navigationStyle":"custom",
"usingComponents": {
"van-nav-bar": "@vant/weapp/nav-bar/index"
......
......@@ -19,9 +19,6 @@ Page({
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: 'JhDropDownMenu'
})
},
clickItem: function (e) {
console.log(e);
......
{
"navigationBarTitleText": "jh-dropdown-menu",
"usingComponents": {}
}
\ No newline at end of file
{
"navigationBarTitleText": "jh-empty",
"usingComponents": {}
}
\ No newline at end of file
{
"navigationBarTitleText": "输入弹框",
"navigationBarTitleText": "jh-input",
"usingComponents": {}
}
\ No newline at end of file
// miniprogram/pages/demoList/otherDemoList/other/swiper.js
Page({
/**
* 页面的初始数据
*/
data: {
swiperList: [{
id: 0,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}, {
id: 1,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
}, {
id: 2,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
}, {
id: 3,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
}, {
id: 4,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
}, {
id: 5,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
}, {
id: 6,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
}],
swiperList2: [{
id: 0,
type: 'image',
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
}],
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
onClickItem(event) {
var item = event.detail
console.log(item);
},
})
\ No newline at end of file
{
"navigationBarTitleText": "jh-swiper",
"usingComponents": {}
}
\ No newline at end of file
<jh-swiper dataArr="{{swiperList}}" activeColor="#0081ff" bind:clickItem="onClickItem"></jh-swiper>
\ No newline at end of file
/* miniprogram/pages/demoList/otherDemoList/other/swiper.wxss */
\ No newline at end of file
......@@ -13,12 +13,6 @@
</van-popup>
<view class="timeView" bindtap="ClickTimeBtn"> 选时间 </view>
<view class="time1" >时间戳: {{currentDate }}</view>
<view class="time2" >时间: {{currentDateStr}}</view>
\ No newline at end of file
Page({
/**
* 页面的初始数据
*/
data: {
isShowPopView2:false,
currentDateStr1:'',
isShowPopView2: false,
currentDateStr1: '',
currentDateStr2: '',
},
......@@ -14,11 +13,8 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log("生命周期函数--监听页面加载 ");
wx.setNavigationBarTitle({
title: '月日周时分 - 时间选择器'
})
},
ClickTimeBtn1: function () {
......@@ -26,7 +22,8 @@ Page({
isShowPopView2: true,
});
},
confirm1: function (event){
confirm1: function (event) {
console.log(event.detail);
this.setData({
currentDateStr1: event.detail.time,
......@@ -45,8 +42,6 @@ Page({
});
},
})
// "JhTimePicker": "/JhComponents/JhTimePicker/JhTimePicker"
\ No newline at end of file
{
"navigationBarTitleText": "jh-time-picker",
"usingComponents": {}
}
\ No newline at end of file
......@@ -22,9 +22,7 @@ Page({
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.setNavigationBarTitle({
title: 'JhYMDTimePicker'
})
},
//点击时间 弹出时间选择器
......
{
"navigationBarTitleText": "jh-ymd-time-picker",
"usingComponents": {}
}
\ No newline at end of file
......@@ -32,6 +32,10 @@ Page({
text: 'empty-view',
pathUrl: '/pages/demoList/otherDemoList/other/empty'
},
{
text: '轮播图',
pathUrl: '/pages/demoList/otherDemoList/other/swiper'
},
]
},
......
......@@ -11,8 +11,7 @@
"list": []
},
"miniprogram": {
"list": [
{
"list": [{
"name": "pages/demoList/demoList",
"pathName": "pages/demoList/demoList",
"query": "",
......@@ -23,12 +22,6 @@
"pathName": "packageA/pages/eChartDemoList/eChart/eChart1",
"query": "",
"scene": null
},
{
"name": "pages/demoList/UI/customNav",
"pathName": "pages/demoList/UI/customNav",
"query": "",
"scene": null
}
]
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册