写在前面
最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成,里面有一些常用的特效,总结一下,希望对大家和我都能有所帮助
实例1:滚动tab选项卡
先看一下效果图吧,能够点击菜单或滑动页面切换,tab菜单部分可以实现左右滚动
好了,看一下我的源码吧!<喜欢的话拿走不谢哟>
1、wxml
<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">营销系统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">美妆护肤view>
<view class="tab-item {
{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">数码电器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">零元购活动view>
scroll-view>
<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>周边团门店微营销系统年费view>
<view>
<text class='price'>¥298.00text>
<text class='line-delete'>
¥298.00
text>
<label>
<button><image mode='widthFix' src='../../image/icon1.png'>image>1人团button>
<button><image mode='widthFix' src='../../image/icon2.png'>image>去开团button>
label>
view>
view>
view>
block>
scroll-view>
swiper-item>
swiper>
复制代码
2、wxss <我只展示了tab菜单处的wxss,页面的样式就不在列出>
.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;
}