学习周记16

实例学习

1.图片轮播

index.js文件中

Page({
  data: {
   		
	circular: true,
	//是否显示画板指示点，根据图片数量自动生成多少个圆点
	indicatorDots: true,
	//选中点的颜色
	//是否竖直
	vertical: false,
	//是否自动切换
	autoplay: true,
	//自动切换的间隔
	interval: 3000,
	//滑动动画时长毫秒
	duration: 1000,
	//所有图片的高度
	imgheight: 100,
	//图片宽度
	imgwidth: 320,
	//默认
	current: 0,
	//轮播图片数组
	imgUrls:[
		{
			imgurl:"http://img.jijuxielvxing.com/Fi_fLZ4YlufhY_u1NMNsNDmAwqDc?imageMogr2/auto-orient/thumbnail/750x/blur/1x0/quality/75"
		},
		{
			imgurl:"http://img.jijuxielvxing.com/FkHSVYfy3Lwo3N4msh-fubaDUzm4?imageMogr2/auto-orient/thumbnail/750x/blur/1x0/quality/75"
		},
		{
			imgurl:"http://img.jijuxielvxing.com/lpcpld_TgVnlklUgC2Z4gm4JqRiI?imageMogr2/auto-orient/thumbnail/750x/blur/1x0/quality/75"
		}
	],

实例中设置了轮播的各种要素，轮播图片为链接形式，也可改为本地图片

2、底部导航栏

tabber
1.index.js文件

import tabbarList from '../../config/router.js'
// components/tabbar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    activeIdx: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    tabbarList: tabbarList,    
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e) {
      const {       
        path
      } = e.currentTarget.dataset

      wx.switchTab({
        url: `/${path}`,
      })
    },
   
    trigger(eventName, value = {}, info) {
      if (!eventName) {
        throw new TypeError('没有自定义事件名')
      }
      this.triggerEvent(eventName, value)
      console.log(`发送 ${eventName} 事件,携带的值为 ${typeof value === 'object' ? JSON.stringify(value) : value} ${info ? '   ---   ' + info : ''}`)
    }
  },
  ready() {},
  pageLifetimes: {
    show: function() {
      console.log('show')      
    }
  }
})

2.index.json文件

{
  "usingComponents": {}
}

3.index.less

.tabbar{
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     height: 100rpx;
     border-top: 0.5px solid #d5d5d5;
     display: flex;
     font-size: 0;
     background: #fff;
     &-item{
         flex: 1;
         text-align: center;
         overflow: hidden;
         box-sizing: border-box;
         padding: 8rpx 10rpx 0;
         color: #333333;
         &-icon{
             margin-bottom: 6rpx;
             height: 56rpx;
             image{
                 width: 56rpx;
                 height: 56rpx;
             }
         }
         &-text{
             font-size: 20rpx;
             line-height: 20rpx;
         }
         &.active{
             color: #fdb975;
         }
     }
 }

4.index.wxml文件

<view class='tabbar'>
  <view  wx:for='{{tabbarList}}' class='tabbar-item {{activeIdx === index ? "active" : ""}}' wx:key='{{item.pagePath}}' bindtap='handleItemTap' data-path='{{item.pagePath}}' data-idx='{{index}}'>
    <view class='tabbar-item-icon'>
      <image class="tabbar-item-icon-image" src='{{activeIdx === index ? item.selectedIconPath : item.iconPath}}'></image>
    </view>
    <view class='tabbar-item-text'>{{item.text}}</view>
  </view>
</view>

5.index.wxss文件

.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  border-top: 0.5px solid #d5d5d5;
  display: flex;
  font-size: 0;
  background: #fff;
}
.tabbar-item {
  flex: 1;
  text-align: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 8rpx 10rpx 0;
  color: #333333;
}
.tabbar-item-icon {
  margin-bottom: 6rpx;
  height: 56rpx;
}
.tabbar-item-icon-image {
  width: 56rpx;
  height: 56rpx;
}
.tabbar-item-text {
  font-size: 20rpx;
  line-height: 20rpx;
}
.tabbar-item.active {
  color: #fdb975;
}

6.config文件中的router.js文件

module.exports = [
  {
    "pagePath": "pages/index/index",
    "text": "首页",
    "iconPath": "/icon/home_nor.png",
    "selectedIconPath": "/icon/home_pre.png"
  },
  {
    "pagePath": "pages/logs/logs",
    "text": "日志",
    "iconPath": "/icon/center_nor.png",
    "selectedIconPath": "/icon/center_pre.png"
  },  
  {
    "pagePath": "pages/mine/index",
    "text": "我的",
    "iconPath": "/icon/mine_nor.png",
    "selectedIconPath": "/icon/mine_pre.png"
  }
]

结果