miniprogram / ruiwang · 提交

转到一个项目

作者 朱振飞
提交 9af503fc49d0491e0e40cae4c37c53baecc56a10 1 个父辈 bf7f3467

commit

内嵌 并排对比
正在显示 36 个修改的文件 包含 502 行增加 和 118 行删除
... ... @@ -20,26 +20,31 @@ Page({
currentSwiper: 0,
},
changeIndicatorDots(e) {
console.log(e)
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay(e) {
consolle.log(e)
this.setData({
autoplay: !this.data.autoplay
})
},
intervalChange(e) {
console.log(e)
this.setData({
interval: e.detail.value
})
},
durationChange(e) {
console.log(e)
this.setData({
duration: e.detail.value
})
},
swiperChange: function (e) {
conosle.log(e)
this.setData({
currentSwiper: e.detail.current
})
... ... @@ -87,6 +92,7 @@ Page({
wx.navigateTo({
url: '../about/about'
})
console.log(1)
}
// 向右滑动
if (touchMove - touchDot >= 40 && time < 10) {
... ...
<!--pages/application/application.wxml-->
<view class='app_lication_banner' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >
<swiper
bindchange='swiperChange'
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
circular="{{circular}}"
>
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item catchtouchmove="stopTouchMove">
<image src="{{item.url}}" class="slide-image" width="100%" height="100%" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="index">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
<view class='app_lication_banner'>
<swiper bindchange='swiperChange' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<!-- catchtouchmove="stopTouchMove" -->
<image src="{{item.url}}" class="slide-image" width="100%" height="100%" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="index">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
<!-- 跳转下一页 -->
<view class='drop_img'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/left.png' bindtap='backFun' style='margin-right:200rpx;'></image>
<image src='http://pjq0ww1cj.bkt.clouddn.com/right.png' bindtap="jumpFun"></image>
</view>
<!-- 客服 -->
<view class='chat_peo'>
<button open-type="contact" class='contacButton'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/chat_peo.png'></image>
</button>
</view>
</view>
<!-- 客服 -->
<view class='chat_peo'>
<button open-type="contact" class='contacButton'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/chat_peo.png'></image>
</button>
</view>
</view>
\ No newline at end of file
... ...
<!--pages/case/case.wxml-->
<view class='case_wrap' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >
<view class='case_wrap' >
<!--banner -->
<view class='case_banner_box'>
<swiper bindchange='swiperChange'
... ... @@ -22,7 +22,7 @@
</view>
<!--案例类型 -->
<view class='case_box'>
<view class='case_box' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >
<view class='case_title'>
<view class='case_title_content'>
<view class='case_contnet_line'></view>
... ...
//index.js
//获取应用实例
const app = getApp()
var touchDot = 0;//触摸时的原点
var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = "";// 记录/清理时间记录
var touchDot = 0; //触摸时的原点
var time = 0; // 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = ""; // 记录/清理时间记录
Page({
data: {
data: {
currentSwiper: 0,
autoplay: true,
interval: 5000,
duration: 1000,
circular: true,
contact: false
},
//事件处理函数
bindViewTap: function() {
},
//事件处理函数
bindViewTap: function () {
},
onLoad: function () {
//首先获取小程序实例，访问app.js中的函数
//调用show函数，传参
//注意：查看上面show函数定义查看参数含义
//第一个参数是当前的页面对象，方便函数setData直接返回数据
//第二个参数是绑定的数据名,传参给setData，详细见上面
//第三个参数是上下滑动的px,因为class="init"定义初始该元素向下偏移了200px，所以这里使其上移200px
//第四个参数是需要修改为的透明度，这里是1，表示从初始的class="init"中定义的透明度0修改到1
app.slideupshow(this, 'slide_up1', 0, 1);
app.sliderightshow(this, 'slide_up2', 0, 1);
},
// 触摸开始事件
touchStart: function (e) {
touchDot = e.touches[0].pageX; // 获取触摸时的原点
// 使用js计时器记录时间
interval = setInterval(function () {
time++;
}, 100);
},
// 触摸移动事件
touchMove: function (e) {
var touchMove = e.touches[0].pageX;
console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
// 向左滑动
console.log(time)
if (touchMove - touchDot <= -40 && time < 10) {
wx.navigateTo({
url: '../case/case'
});
}
// 向右滑动
if (touchMove - touchDot >= 40 && time < 10) {
console.log('向右滑动');
// alert("已经是第一页了")
// wx.switchTab({
// // url: '../case/case'
// });
},
firstChange(e){
let title = e.detail.current == '0' ? '锐网科技案例集锦' : e.detail.current == '1' ? '锐网科技':'政府案例';
if (e.detail.current == '2'){
this.setData({
contact: true
})
}else{
this.setData({
contact: false
})
}
wx.setNavigationBarTitle({
title: title,
})
},
onLoad: function() {
//首先获取小程序实例，访问app.js中的函数
//调用show函数，传参
//注意：查看上面show函数定义查看参数含义
//第一个参数是当前的页面对象，方便函数setData直接返回数据
//第二个参数是绑定的数据名,传参给setData，详细见上面
//第三个参数是上下滑动的px,因为class="init"定义初始该元素向下偏移了200px，所以这里使其上移200px
//第四个参数是需要修改为的透明度，这里是1，表示从初始的class="init"中定义的透明度0修改到1
app.slideupshow(this, 'slide_up1', 0, 1);
app.sliderightshow(this, 'slide_up2', 0, 1);
this.getlist()
},
// 触摸开始事件
touchStart: function(e) {
touchDot = e.touches[0].pageX; // 获取触摸时的原点
// 使用js计时器记录时间
interval = setInterval(function() {
time++;
}, 100);
},
// 触摸移动事件
touchMove: function(e) {
var touchMove = e.touches[0].pageX;
console.log("touchMove:" + touchMove + " touchDot:" + touchDot + " diff:" + (touchMove - touchDot));
// 向左滑动
if (touchMove - touchDot <= -40 && time < 10) {
wx.navigateTo({
url: '../case/case'
});
}
// 向右滑动
if (touchMove - touchDot >= 40 && time < 10) {
console.log('向右滑动');
// alert("已经是第一页了")
// wx.switchTab({
// // url: '../case/case'
// });
}
},
getlist() {
let url = 'portal/Api/index';
app.post(url, {}).then((res) => {
// console.log('res',res);
if (res.type) {
this.setData({
imgUrls: res.banner
})
}
},
// 触摸结束事件
touchEnd: function (e) {
clearInterval(interval); // 清除setInterval
time = 0;
},
getUserInfo: function (e) {
},
tapName: function (e) {
wx.navigateTo({
url: '../case/case'
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
})
}).catch((err) => {
console.log(err);
})
},
caseDetailFun(e) {
wx.navigateTo({
url: '../caseDetail/caseDetail?id=' + e.currentTarget.dataset.id
})
},
goFun(e) {
wx.navigateTo({
url: '../caseList/caseList?html=' + e.currentTarget.dataset.html + '&&id=' + e.currentTarget.dataset.id
})
},
// 触摸结束事件
touchEnd: function(e) {
clearInterval(interval); // 清除setInterval
time = 0;
},
getUserInfo: function(e) {
},
tapName: function(e) {
wx.navigateTo({
url: '../case/case'
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
})
\ No newline at end of file
... ...
<!--index.wxml-->
<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" >
<view class='imgPolytope'>
<view class="container">
<swiper bindchange='firstChange' indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="1500" circular="true" vertical='true'>
<swiper-item>
<view class='imgPolytope'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/shouye.png'></image>
</view>
<view class='index_title'>
<view class='title init' animation="{{slide_up1}}">数据分析及可视化</view>
<view class='content contentInit' animation="{{slide_up2}}">大数据探索商业价值的无限可能</view>
</view>
<view class='drop_img' bindtap="tapName">
</view>
<view class='index_title'>
<view class='title init' animation="{{slide_up1}}">数据分析及可视化</view>
<view class='content contentInit' animation="{{slide_up2}}">大数据探索商业价值的无限可能</view>
</view>
<view class='drop_img' bindtap="tapName">
<image src='http://pjq0ww1cj.bkt.clouddn.com/right.png'></image>
</view>
</view>
</swiper-item>
<!-- 第二屏 -->
<swiper-item>
<view class='case_wrap'>
<!--banner -->
<view class='case_banner_box'>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key>
<swiper-item>
<image src="{{item.url}}" data-id='{{item.category_id}}' bindtap='caseDetailFun' class="slide-image" width="100%" height="100%" />
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{imgUrls}}" wx:key="">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
<!--案例类型 -->
<view class='case_box' >
<view class='case_title'>
<view class='case_title_content'>
<view class='case_contnet_line'></view>
<view class='case_title_text'>案例类型</view>
</view>
</view>
<view class='case_content'>
<view class='case_list' data-html="政府案例" data-id='1' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/zhengfu.png'></image>
<view class='case_list_text'>政府</view>
</view>
<view class='case_list' data-html="地产案例" data-id='3' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/dichan.png'></image>
<view class='case_list_text'>地产</view>
</view>
<view class='case_list' data-html="制造案例" data-id='2' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/zhizao.png'></image>
<view class='case_list_text'>制造</view>
</view>
<view class='case_list' data-html="教育案例" data-id='5' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/jiaoyu.png'></image>
<view class='case_list_text'>教育</view>
</view>
<view class='case_list' data-html="物流案例" data-id='4' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/jinrong.png'></image>
<view class='case_list_text'>物流</view>
</view>
<view class='case_list' data-html="零售案例" data-id='6' bindtap='goFun'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/lingshou.png'></image>
<view class='case_list_text'>零售</view>
</view>
</view>
<view class='drop_img'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/left.png' style='margin-right:200rpx;' bindtap='backFun'></image>
<image src='http://pjq0ww1cj.bkt.clouddn.com/right.png' bindtap="jumpFun"></image>
</view>
</view>
<!-- 客服 -->
<view class='chat_peo'>
<button open-type="contact" class='contacButton'>
<!-- <button open-type="contact" class='contacButton'> -->
<image src='http://pjq0ww1cj.bkt.clouddn.com/chat_peo.png'></image>
<!-- </button> -->
</button>
</view>
</view>
</swiper-item>
<!-- 第三屏 -->
<swiper-item style='position: relative'>
<view class='app_lication_banner'>
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<!-- catchtouchmove="stopTouchMove" -->
<image src="{{item.url}}" class="slide-image" width="100%" height="100%" />
</swiper-item>
</block>
</swiper>
<!-- <view class="dots">
<block wx:for="{{imgUrls}}" wx:key="index">
<view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view> -->
<!-- 客服 -->
<view class='chat_peo'>
<button open-type="contact" class='contacButton'>
<image src='http://pjq0ww1cj.bkt.clouddn.com/chat_peo.png'></image>
</button>
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class='aboutUs' wx:if='{{contact}}'>
了解我们
</view>
</view>
\ No newline at end of file
... ...
/**index.wxss**/
swiper{
height: 100%;
width: 100%;
}
.container {
width: 100%;
height: 100%;
... ... @@ -7,12 +11,15 @@
.imgPolytope {
width: 519rpx;
height: 577rpx;
margin: 190rpx 0 0;
margin: 190rpx auto;
}
.imgPolytope image {
width: 100%;
height: 100%;
}
.index_title{
text-align: center;
}
.index_title .title {
color: #000;
font-size: 46rpx;
... ... @@ -31,3 +38,220 @@
transform: translateX(1000px);
}
.drop_img{
display: none;
}
/* 第二屏 */
/* pages/case/case.wxss */
.case_wrap {
width: 100%;
height: 100%;
background: #F0EEED;
position: relative;
}
.case_wrap .case_banner_box {
width: 100%;
height: 540rpx;
background: #fff;
position: relative;
}
.case_wrap .case_banner_box swiper {
width: 100%;
height: 487rpx;
}
.case_wrap .case_banner_box image {
width: 100%;
height: 100%;
}
.dots{
/* width: 156rpx; */
/* height: 36rpx; */
display: flex;
flex-direction: row;
position: absolute;
left: 320rpx;
bottom: 20rpx;
/* margin-top: -18rpx; */
}
/*未选中时的小圆点样式 */
.dot{
width: 16rpx;
height: 16rpx;
border-radius: 50%;
margin-right: 26rpx;
background-color:#CCCCCC;
}
/*选中以后的小圆点样式 */
.active{
width: 16rpx;
height: 16rpx;
border-radius:8rpx;
background-color: #FB7F47;
}
/*案例css */
.case_box {
width: 100%;
height: 647rpx;
background: #fff;
position: absolute;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
}
.case_title {
width: 100%;
height: 112rpx;
display: flex;
justify-content: center;
align-items: center;
}
.case_title .case_title_content {
width:276rpx;
height: 100%;
position: relative;
}
.case_title_content .case_contnet_line {
position: absolute;
width:100%;
height:1rpx;
background:linear-gradient(90deg,rgba(240,131,12,1),rgba(230,0,18,1));
opacity:0.5;
left: 0;
top: 50%;
}
.case_title_content .case_title_text {
width: 142rpx;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 50%;
margin-left: -76rpx;
background-color: #fff;
color: #000000;
font-size: 30rpx;
}
.case_content {
display: flex;
flex-wrap: wrap;
}
.case_content .case_list {
width: 194rpx;
height: 194rpx;
display: flex;
justify-content: center;
align-items: center;
color: #333333;
font-weight: 500;
font-size: 26rpx;
position: relative;
margin: 0 28rpx 30rpx;
border-radius:10rpx;
}
.case_list image {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* z-index: 0; */
}
.case_list_text {
position: absolute;
/* top: 50%;
left: 50%; */
}
/* 第三屏 */
.app_lication_banner {
width: 100%;
height: 100%;
position: relative;
}
swiper {
width: 100%;
height: 100%;
}
swiper image {
width: 100%;
height: 100%;
}
.dots{
/* width: 156rpx; */
height: 36rpx;
display: flex;
flex-direction: row;
position: absolute;
left: 325rpx;
bottom: 100rpx;
}
/*未选中时的小圆点样式 */
.dot{
width: 16rpx;
height: 16rpx;
border-radius: 50%;
margin-right: 26rpx;
background-color:#CCCCCC;
}
/*选中以后的小圆点样式 */
.active{
width: 16rpx;
height: 16rpx;
border-radius:8rpx;
background-color: #FB7F47;
}
/* 跳转下一页 */
.drop_img {
position: absolute;
bottom: 40rpx;
left: 50%;
margin-left: -146rpx;
}
.aboutUs{
height: 70rpx;
width: 220rpx;
font-size: 28rpx;
color: #FFF;
background-color: #FFA333;
border-radius: 35rpx;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
bottom: 100rpx;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
z-index: 15;
}
... ...
... ... @@ -20,9 +20,22 @@
"current": -1,
"list": []
},
"miniprogram": {
"plugin": {
"current": -1,
"list": []
},
"game": {
"list": []
},
"miniprogram": {
"current": 0,
"list": [
{
"id": -1,
"name": "slider",
"pathName": "pages/application/application"
}
]
}
}
}
\ No newline at end of file
... ...