寫在前面
最近在負(fù)責(zé)一個(gè)微信小程序的前端以及前后端接口的對(duì)接的項(xiàng)目，整體上所有頁(yè)面的布局我都已經(jīng)搭建完成，里面有一些常用的特效，總結(jié)一下，希望對(duì)大家和我都能有所幫助
實(shí)例1：滾動(dòng)tab選項(xiàng)卡
先看一下效果圖吧，能夠點(diǎn)擊菜單或滑動(dòng)頁(yè)面切換，tab菜單部分可以實(shí)現(xiàn)左右滾動(dòng)
好了，看一下我的源碼吧！<喜歡的話拿走不謝喲>
1、wxml
-
<!-- tab header -->
-
<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
-
<view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">全部</view>
-
<view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">營(yíng)銷系統(tǒng)</view>
-
<view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">家居建材</view>
-
<view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">美妝護(hù)膚</view>
-
<view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">數(shù)碼電器</view>
-
<view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">母嬰玩具</view>
-
<view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">零元購(gòu)活動(dòng)</view>
-
</scroll-view>
-
<!-- tab content -->
-
<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="max-height:{{winHeight}}rpx">
-
<swiper-item wx:for="{{[0,1,2,3,4,5,6]}}">
-
<scroll-view scroll-y="true" class="scoll-h">
-
<block wx:for="{{[1,2,3,4,5,6,7]}}" wx:key="*this">
-
<view class='goods-Wrapper'>
-
<image mode='widthFix' class="goods-img" src='../../image/goods1.jpg'></image>
-
<view class="goods-info">
-
<view>周邊團(tuán)門店微營(yíng)銷系統(tǒng)年費(fèi)</view>
-
<view>
-
<text class='price'>¥298.00</text>
-
<text class='line-delete'>
-
¥298.00
-
</text>
-
<label>
-
<button><image mode='widthFix' src='../../image/icon1.png'></image>1人團(tuán)</button>
-
<button><image mode='widthFix' src='../../image/icon2.png'></image>去開團(tuán)</button>
-
</label>
-
</view>
-
</view>
-
</view>
-
</block>
-
</scroll-view>
-
</swiper-item>
-
</swiper>
2、wxss <我只展示了tab菜單處的wxss，頁(yè)面的樣式就不在列出>
-
.tab-h {
-
height: 80rpx;
-
width: 100%;
-
box-sizing: border-box;
-
overflow: hidden;
-
line-height: 80rpx;
-
background: #f7f7f7;
-
font-size: 14px;
-
white-space: nowrap;
-
position: fixed;
-
top: 0;
-
left: 0;
-
z-index: 99;
-
}
-
-
.tab-item {
-
margin: 0 36rpx;
-
display: inline-block;
-
}
-
-
.tab-item.active {
-
color: #4675f9;
-
position: relative;
-
}
-
-
.tab-h .tab-item.active:after {
-
content: "";
-
display: block;
-
height: 8rpx;
-
width: 115rpx;
-
background: #4675f9;
-
position: absolute;
-
bottom: 0;
-
left: 5rpx;
-
border-radius: 16rpx;
-
}
-
-
.tab-h .tab-item:nth-child(1).active:after {
-
width: 52rpx;
-
}
3、js
-
var app = getApp();
-
Page({
-
data: {
-
winHeight: "",//窗口高度
-
currentTab: 0, //預(yù)設(shè)當(dāng)前項(xiàng)的值
-
scrollLeft: 0, //tab標(biāo)題的滾動(dòng)條位置
-
expertList: [{ //假數(shù)據(jù)
-
img: "",
-
name: "",
-
tag: "",
-
answer: 134,
-
listen: 2234
-
}]
-
},
-
// 滾動(dòng)切換標(biāo)簽樣式
-
switchTab: function (e) {
-
this.setData({
-
currentTab: e.detail.current
-
});
-
this.checkCor();
-
},
-
// 點(diǎn)擊標(biāo)題切換當(dāng)前頁(yè)時(shí)改變樣式
-
swichNav: function (e) {
-
var cur = e.target.dataset.current;
-
if (this.data.currentTaB == cur) { return false;
|
