微信小程序（3）swiper组件和自定义顶部

前提：又派去别的组开发小程序了...记录一下这次开发用到的组件和遇到的问题

一、swiper组件

    因为要左右滑动切换图片，所以就用了swiper组件，其实这个组件调用很简单，用mpvue的时候要使用事件用@change就可以了

<swiper
	:indicator-dots="false"
	:autoplay="false"
	:current="current"
	@change="swiperChange('swiperChange', $event)"
>
	<block v-for="(item, index) in testList" :key="index">
		<swiper-item>
			...内容
		</swiper-item>
	</block>
</swiper>

swiperChange(e) {
	// 滑动改变当前index
	const index = e.mp.detail.current
	this.current = index
	this.chooseIndex = index
}

二、自定义顶部

    因为考试界面需要自定义顶部，所以需要自己写一个

    1. 在模块main.json里面设置自定义顶部的属性 

"navigationStyle": "custom",

    2.  写一个顶部组件 navation.vue

<template>
  <view
    class="navigation-bar"
    :style="{
      paddingTop: paddingTop + 'px',
      height: height + 'px'
    }"
  >
    <div
      class="back"
      :style="{ lineHeight: barStyle.height + 'px' }"
      @click="goBack"
    >
      交卷
    </div>
    <view
      class="title"
      :style="{
        textAlign: barStyle.textAlign,
        fontSize: barStyle.fontSize + 'px',
        lineHeight: barStyle.fontSize + 'px',
        lineHeight: barStyle.height + 'px'
      }"
      >标题</view
    >
  </view>
</template>

<script>
import { statusBar, navigationBar, navBarStyle } from '@/utils/systemSetting'
import store from '@/store/store'
export default {
  data() {
    return {
      paddingTop: statusBar.android, // 默认为android大部分普通机型高度
      height: navigationBar.default + statusBar.android,
      barStyle: {},
      currentPage: '',
      leftShow: false,
      marginTop: 0,
      scale: 1,
      timerFuc: null
    }
  },
  computed: {
    menuSettings() {
      return store.state.menuSettings
    }
  },
  onLoad(e) {
    this.setTime(e.id)
  },
  onUnload() {
    clearTimeout(this.timerFuc)
  },
  mounted() {
    // 计算顶部高度 判断是安卓手机还是iphone手机，获取高度和设置高度
    const systemInfo = wx.getSystemInfoSync()
    if (this.menuSettings.height === 0) {
      this.getMenuSettings(1, 3)
    }
    this.scale = 1 - 0.5 / this.menuSettings.height
    this.marginTop = this.menuSettings.top - systemInfo.statusBarHeight
    const ratio = systemInfo.screenHeight / systemInfo.screenWidth // 高宽比例
    const isNewModel = ratio >= 2
    const isIPhone = systemInfo.model.indexOf('iPhone') >= 0
    const barHeight =
      systemInfo.statusBarHeight ||
      (isNewModel
        ? statusBar.newModel
        : isIPhone
        ? statusBar.iPhone
        : statusBar.android)
    this.paddingTop = barHeight
    this.height = barHeight + navigationBar.default
    let barStyle = { ...navBarStyle }
    barStyle.height = navigationBar.default
    this.barStyle = barStyle
  },
  methods: {
    getMenuSettings(current, count) {
      let menuSettings = wx.getMenuButtonBoundingClientRect()
      if (menuSettings.height === 0) {
        if (current > 3) {
          return
        }
        setTimeout(() => {
          this.getMenuSettings(current + 1, count)
        }, 200)
      } else {
        store.commit('setMenuSettings', menuSettings)
      }
    },
    goBack() {
       wx.navigateBack({
          delta: 1
        })
    }
  }
}
</script>

<style scoped>
.navigation-bar {
  width: 100vw;
  height: 60px;
  background-color: rgba(255, 255, 255, 0);
  color: #000;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  box-sizing: border-box;
}
.back-home {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  margin-left: 10px;
  box-sizing: border-box;
  box-shadow: 0 0 1px rgb(207, 207, 207);
  overflow: hidden;
}
.back-home2 {
  margin-left: 10px;
}
.back-home1 {
  margin-right: 10px;
}
.back {
  margin-left: 15px;
  color: #fe9503;
}
.back img {
  width: 9px;
  height: 16px;
}
.home img {
  width: 17px;
  height: 17px;
}
.line {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.2);
  transform: scaleX(0.5);
}
.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #ff0028;
  font-weight: bold;
}
</style>

    3. 默认数据高度 systemSetting.js

const statusBar = {
  android: 24,
  iPhone: 20,
  newModel: 44 // 长屏下默认高度
}
const navigationBar = {
  default: 44
}
const navBarStyle = {
  background: 'rgba(255,255,255,0)',
  color: '#000',
  textAlignAndroid: 'left',
  textAlignIPhone: 'center',
  textAlign: 'center',
  fontSize: 18
}
export { statusBar, navigationBar, navBarStyle }

4. 界面引入

<navigation-bar @goBack="goBack($event)"></navigation-bar>

5. 展示