微信小程序模板功能1

轮播图

wxml

<view class="container">
<!-- 轮播图 -->
    <view class="swiper">
      <!-- 
          indicator-dots  轮播点
          autoplay 自动播放
          interval 图片切换时间间隔
          duration 自动播放时间间隔
       -->
      <swiper 
        indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}"  
        interval="{{interval}}" 
        duration="{{duration}}"
      >
        <block wx:for="{{background}}">
          <swiper-item>
              <image src="{{item}}"></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
</view>

wxss

.container{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* 轮播图
 */
.swiper {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 10%;
}

js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
  	// 图片自拟
    background: ['../static/image/1.jpg', '../static/image/3.jpg', '../static/image/5.jpg'],
    indicatorDots: true,
    vertical: false,
    autoplay: false,
    interval: 2000,
    duration: 500,
    //轮播图
  },
})

进度条

wxml

<!-- 进度条 -->
    <view class="slider">
      <slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000"/>
    </view>

wxss

/* 进度条 */
.slider {
  width: 100%;
  /* border: 1rpx solid black;
  margin-top: 20rpx; */
}

选项卡

wxml

<!-- 选项卡 -->
    <view class="card">
      <view class="carditem" wx:for="{{background}}">
          <image src="{{item}}"></image>
          <text>茶叶</text>
      </view>
    </view>

wxss

/* 选项卡 */
.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin: 30rpx 0;
  width: 100%;
  height: 300rpx;

}

.carditem {
  width: 18%;
  height: 50%;
  font-size: 28rpx;
  text-align: center;
}

.carditem image {
  width: 100%;
  height: 70%;
}

左侧列表

wxml

  <!-- 左侧列表 -->
  <scroll-view class="left-navbar" scroll-y="true">
    <view 
      wx:for="{{screenArray}}" 
      class="{{ currentTab == index ? 'active' : '' }}" 
      bindtap="{{ currentTab != index ? 'navbarTap':'' }}" 
      id="{{index}}" 
      data-screenId="{{item.screenId}}"
    >
      {{item.screenName}}
    </view>
  </scroll-view>

wxss

/* 列表 */
.left-navbar {
  position:absolute;
  left:0;
  width:25.5%;
  background-color:#eee;
  font-size:25rpx;
}

.left-navbar view {
  height:90rpx;
  line-height: 90rpx;
  text-align:center;
}

.active {
  background-color: white;
  color:black;
  font-weight: 800;
  font-size:30rpx;
  border-left: 2rpx solid red;
}

js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    screenArray: [{
      screenId: 1,
      screenName: '热搜推荐'
    },
    {
      screenId: 2,
      screenName: '家用电器'
    },
    {
      screenId: 3,
      screenName: '家居/建材'
    },
    {
      screenId: 4,
      screenName: '手机/数码'
    },
    {
      screenId: 5,
      screenName: '美妆个护'
    },
    {
      screenId: 6,
      screenName: '服饰/内衣'
    },
    {
      screenId: 7,
      screenName: '箱包/首饰'
    },
    {
      screenId: 8,
      screenName: '母婴/玩具'
    },
    {
      screenId: 9,
      screenName: '食品生鲜'
    },
    {
      screenId: 10,
      screenName: '健康保健'
    },
    {
      screenId: 11,
      screenName: '绿植/礼品'
    }
  ], //左侧导航栏内容
  currentTab: 0, //对应样式变化
  },

    /**
   * 导航切换
   */
  navbarTap: function(e) {
    console.log(e);
    this.setData({
      currentTab: e.currentTarget.id, //按钮CSS变化
      screenId: e.currentTarget.dataset.screenid,
    })
    //刷新右侧内容的数据
    var screenId = this.data.screenId;
  },