1.左右滑动切换页面
wxml
<view class='shangping' bindtouchstart="touchStart" bindtouchend="touchEnd"></view>
js
var time = 0;
var touchDot = 0;//触摸时的原点
var interval = "";
var flag_hd = true;
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
flag_hd = true; //重新进入页面之后，可以再次执行滑动切换页面代码
clearInterval(interval); // 清除setInterval
time = 0;
},
//触摸开始
touchStart: function (e) {
touchDot = e.touches[0].pageX; // 获取触摸时的原点
// 使用js计时器记录时间
interval = setInterval(function () {
time++;
}, 100);
},
// 触摸结束事件
touchEnd: function (e) {
var touchMove = e.changedTouches[0].pageX;
// 向左滑动
if (touchMove - touchDot <= -40 && time < 10 && flag_hd == true) {
flag_hd = false;
//执行切换页面的方法
console.log("向右滑动");
wx.redirectTo({
url: '../tuwen/tuwen'
})
}
// 向右滑动
if (touchMove - touchDot >= 40 && time < 10 && flag_hd == true) {
flag_hd = false;
//执行切换页面的方法
console.log("向左滑动");
console.log(interval);
wx.redirectTo({
// url: '../tuwen/tuwen'
})
}
clearInterval(interval); // 清除setInterval
time = 0;
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
})
2.轮播图
wxml
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
<block wx:for="{{bnrUrl}}" wx:for-index="index">
<swiper-item>
<image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
</swiper-item>
</block>
</swiper>
js
Page({
data: {
"bnrUrl": [{
"url": "img/1242x366-1531449084.jpg"
}, {
"url": "img/1242x366_djj_0706-1530871651.jpg"
}, {
"url": "img/1242x366_lyx_0709-1531122892.jpg"
}, {
"url": "img/14540040236323_1_o.jpg"
}]
}
});
3.页面随着顶部点击或者滑动切换页面
wxml
<scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;">
<!-- tab -->
<view class="tab">
<view class="tab-nav" style='font-size:12px'>
<view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:20%;max-width:20%;text-align:center;height: 80rpx;{{index>4?'border-bottom: 1rpx dotted #ddd;':''}}">{{item.text}}</view>
<view>
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">22</view>
</view>
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
<!-- 我是哈哈 -->
<swiper-item>
<view>我是哈哈</view>
</swiper-item>
<!-- 我是呵呵 -->
<swiper-item>
<view>我是呵呵</view>
</swiper-item>
<!-- 我是嘿嘿 -->
</swiper>
<view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
</view>
</view>
</view>
</scroll-view>
wxss
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #777777;
text-align: center;
line-height: 80rpx;
}
.swiper-tab-list{ font-size: 30rpx;
display: inline-block;
width: 50%;
color: #777777;
}
.on{ color: #da7c0c;
border-bottom: 5rpx solid #da7c0c;}
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{
text-align: center;
}
js
var app = getApp()
Page({
data: {
/**
* 页面配置
*/
winWidth: 0,
winHeight: 0,
// tab切换
currentTab: 0,
},
onLoad: function () {
var that = this;
/**
* 获取系统信息
*/
wx.getSystemInfo({
success: function (res) {
that.setData({
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
/**
* 滑动切换tab
*/
bindChange: function (e) {
var that = this;
that.setData({ currentTab: e.detail.current });
},
/**
* 点击tab切换
*/
swichNav: function (e) {
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current
})
}
},
/**
* 点击分享
*/
onShareAppMessage: function () {
return {
title: '装逼小程序',
path: '/page/user?id=123'
}
}
})
4.跳转页面
wxml
<view class='tw' bindtap='tiaoz'>
js
tiaoz: function (e) {
wx.navigateTo({
url: '../tuwen/tuwen',
})
},
tiao: function (e) {
wx.switchTab({
url: '../indexda/indexda',
})
},
5.设置底部导航栏
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "image/tab_home_select.png",
"iconPath": "image/tab_home.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"selectedIconPath": "image/tab_msg_select.png",
"iconPath": "image/tab_msg.png",
"pagePath": "pages/message/message",
"text": "消息"
},
{
"selectedIconPath": "image/tab_me_select.png",
"iconPath": "image/tab_me.png",
"pagePath": "pages/my/my",
"text": "我的"
}
]
}
tabBar 指底部的 导航配置属性
color 未选择时 底部导航文字的颜色
selectedColor 选择时 底部导航文字的颜色
borderStyle 底部导航边框的样色（注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条）
list 导航配置数组
selectedIconPath 选中时 图标路径
iconPath 未选择时 图标路径
pagePath 页面访问地址
text 导航图标下方文字
6.设置顶部导航栏
{
"backgroundTextStyle": "light", //背景字体颜色
"navigationBarBackgroundColor": "#fff", //背景颜色
"navigationBarTitleText": "设备", //顶部文字
"navigationBarTextStyle": "black" //顶部字体颜色
}
7.点击按钮整个页面弹出小页面
wxml
<!-- 要点击的按钮 -->
<button bindtap="changeYL">预览</button>
<!-- 要弹出的小框 -->
<!-- 外框 -->
<view class="modal-mask" bindtap="hideModal" wx:if="{{showModal}}"></view>
<!-- 内框：要显示内容的框 -->
<view class="modal-dialog" wx:if="{{showModal}}">
wohenkaixing
</view>
wxss
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgb(238, 232, 232);
opacity: 0.5;
}
.modal-dialog {
overflow: hidden;
position: fixed;
background: white;
width: 90%;
height: 800rpx;
margin-left: 40rpx;
margin-top: 20rpx;
}
.view-image {
width: 800rpx;
height: 900rpx;
}
js
onLoad: function (options) {
},
changeYL: function () {
this.setData({
showModal: true
})
},
/**
* 隐藏模态对话框
*/
hideModal: function () {
this.setData({
showModal: false
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
image.png
8.使得页面出现滚动效果并且隐藏滚动条
给页面整体加以下代码
overflow: scroll;
image.png
9.使得页面隐藏滚动条
在要隐藏的滚动条页面的 wxss 里面写入：
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
image.png
网友评论