一、底部导航(tabBar)
在app.json中的代码：
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/teacher/teacher",
"pages/student/student",
"pages/jiekou/jiekou"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#f00",
"navigationBarTitleText": "Web67",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#000000",
"selectedColor": "#ff0000",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "img/首页之前.png",
"selectedIconPath": "img/首页之后.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "img/日志1.png",
"selectedIconPath": "img/日志2.png"
},
{
"pagePath": "pages/teacher/teacher",
"text": "老师",
"iconPath": "img/老师1.png",
"selectedIconPath": "img/老师2.png"
},
{
"pagePath": "pages/student/student",
"text": "学生",
"iconPath": "img/学生1.png",
"selectedIconPath": "img/学生2.png"
},
{
"pagePath": "pages/jiekou/jiekou",
"text": "接口",
"iconPath": "img/接口1.png",
"selectedIconPath": "img/接口2.png"
}
]
},
"entryPagePath": "pages/index/index",
"style": "v2",
"sitemapLocation": "sitemap.json"
}属性设置：
效果图：
二、轮播图(swiper)加tab切换
知识点：
1.事件类别：
tap：点击事件；
longtap：长按事件；
touchstart：触摸开始；
touchend：触摸结束；
touchcansce：取消触摸；
2.事件绑定：
bind绑定；
catch绑定；（能阻止事件冒泡）
wxml：
<!--pages/teacher/teacher.wxml-->
<text>我是嫩爹</text>
<view class="header">header</view>
<view class="banner">
<swiper autoplay="true" interval="3000" duration="500" class="header1">
<block wx:for="{{imgs}}" wx:key="ids">
<swiper-item class="header2">
<image src="{{item.src}}" alt="图片没了" class="header3"></image>
<text>{{item.names}}</text>
</swiper-item>
</block>
</swiper>
</view>
<!-- <text wx:for="{{teas}}" bindtap="showteacher" wx:key="id">{{item.names}}</text> -->
<view class="cons">
<view class="left">
<block wx:for="{{imgs}}" wx:key="idss">
<!-- bindtap:绑定一个函数作为点击事件； data- :代表传入数组中的值(可以写多个值) -->
<text class="con1" bindtap="show" data-ids="{{item.ids}}">{{item.names}}</text>
</block>
</view>
<view class="right">
<text> {{rights.names}}</text>
<text>{{rights.info}}</text>
<!-- {{teas[0].info}}
{{teas[1].info}} -->
</view>
</view>
<view class="footer">
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">首页</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">内容</view>
<view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">介绍</view>
<view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">尾页</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-item>
<view>介绍部分</view>
</swiper-item>
<swiper-item>
<view>尾部内容</view>
</swiper-item>
</swiper>
</view>wxss：
/* pages/teacher/teacher.wxss */
.header{
width: 750rpx;
height: 50rpx;
background-color: red;
color: #ffffff;
text-align: center;
}
.banner{
width: 750rpx;
height: auto;
}
.header1{
height: 600rpx;
margin: 0 auto;
}
.header2{
height: 600rpx;
text-align: center;
}
.header3{
width: 750rpx;
height: 500rpx;
}
.con1{
width: 100%;
float: left;
height: 50rpx;
text-align: center;
}
.cons{
width: 750rpx;
height: 300rpx;
display: flex;
flex-direction: row;
}
.left{
width: 20%;
height: 200rpx;
background: red;
}
.right{
width: 80%;
height: 200rpx;
background: green;
}
.footer{
width: 100%;
height: 700rpx;
}
.swiper-tab{
width: 100%;
text-align: center;
line-height: 80rpx;}
.swiper-tab-list{ font-size: 30rpx;
display: inline-block;
width: 33.33%;
color: #777777;
}
.on{ color: blue;
border-bottom: 3rpx solid blue;}
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{
text-align: center;
}
js:
// pages/teacher/teacher.js
Page({
/**
* 页面的初始数据
*/
data: {
rights:'',//定义一个在右边显示的内容函数或数组
winWidth: 0,
winHeight: 0,
currentTab: 0,
teas:[{id:1,names:"刘老师",info:"介绍1"},{id:2,names:"任老师",info:"介绍2"},{id:3,names:"杨老师",info:"介绍3"},{id:4,names:"郑老师",info:"介绍4"},],
imgs:[{ids:0,src:'../../img/liu.jpg',names:"刘老师",info:"介绍1"},{ids:1,src:'../../img/ren.jpg',names:"任老师",info:"介绍2"},{ids:2,src:'../../img/yang.jpg',names:"杨老师",info:"介绍3"},{ids:3,src:'../../img/zheng.jpg',names:"郑老师",info:"介绍4"},]
},
// showteacher:function(){
// console.log("1");
// },
show(a){
let b=a.target.dataset.ids;//将传入的数据中的ids值赋值给b(需要输出a来找到ids的位置)
let c=this.data.teas[b];//将数组teas中的数据赋值给c
this.setData({rights:c});//重新渲染data中的值
},
// 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
})
}
},
bindChange: function( e ) {
var that = this;
that.setData( { currentTab: e.detail.current });
},
onLoad: function() {
var that = this;
/**
* 获取当前设备的宽高
*/
wx.getSystemInfo( {
success: function( res ) {
that.setData( {
winWidth: res.windowWidth,
winHeight: res.windowHeight
});
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
