<view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected">基础信息<span></span></view> <view class="{{selected1?'red':'default'}} sere2" bindtap="selected1">产品简介<span></span></view> <view class="{{selected2?'red':'default '}} sere2 " <traceability Data>=" selected2 "bindtapspan></span></view> <view class="{{selected3?'red':'default'}} sere2" bindtap="selected3">物流信息<span></span></view> </view> <view class="{{selected?'show':'hidden'}}"></view> <view class="{{selected1?'show':'hidden'}}"></view> <view class="{{selected2?'show':'hidden'}}"></view> <view class="{{selected3?'show':'hidden'}}"></view> <view class='live'><image src="https://xcx.hy720.com/wtt/live2.jpg"></image></view>
.nav{
width: 94%;
height: 60rpx;
display: flex;
flex-direction: row;
padding-top: 22rpx;
margin: 0 auto;
}
.default{
line-height: 60rpx;
text-align: center;
width: 23%;
color: #8f8f8f;
font-weight: bold;
font-size: 24rpx;
background-color: #dddddd;
height: 60rpx;
display: block;
border-radius: 20rpx;
}
.sere2{
margin-left: 25rpx;
}
.show{
display: block;
}
.hidden{
display: none;
}
.red{
line-height: 60rpx;
text-align: center;
color: #fff;
width: 23%;
font-weight: bold;
font-size: 24rpx;
background-color: #7cbe67;
height: 60rpx;
display: block;
border-radius: 20rpx;
position: relative;
}
.red span {
position:absolute;
bottom:-12px;
left:0; right:0;
margin:0 auto;
width:0px;
height:0px;
line-height:0px;
font-size:0;
border-width:7px;
border-style:solid dashed;
border-color: #7cbe67 transparent transparent transparent ;
}
.live{
width: 94%;
height: 200rpx;
margin: 0 auto;
display: block;
margin-bottom: 15rpx;
margin-top: 15rpx;
}
.live image{
width: 100%;
height: 200rpx;
margin: 0 auto;
display: block;
}
Pages // / Major / shuig.js
Page ({
/ **
* initial page of data
* /
Data: {
panic: 0, // add 2019-8-22 snapped Start Page
Selected: to true,
selected1: to false,
selected2: false,
selected3: false,
},
/ **
* life cycle function - listen for page loads
* /
onLoad: function (Options) {
},
// click to switch
the Selected: function () {
this.setData ({
the Selected: to true,
selected1: to false,
selected2: to false,
selected3: to false
})
},
selected1: function () {
this.setData ({
Selected: to false,
selected1: true,
selected2: false,
selected3: false
})
},
selected2: function () {
this.setData({
selected: false,
selected1: false,
selected2: true,
selected3: false
})
},
selected3: function () {
this.setData({
selected: false,
selected1: false,
selected2: false,
selected3: true
})
},
})