优化banner图抖动

.gitignore

@@ -2,6 +2,7 @@
 /node_modules
 /public/storage
 /unpackage
+/unpackage/dist
 /.hbuilderx
 Homestead.yaml
 Homestead.json

components/swipers/swiper-pu.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="banner-box">
-		<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight}" :autoplay="isplay" :circular="true" :interval="3000" :duration="500">
+		<swiper :current="bcurrent" @change="changeBanner" :style="{height: newHeight}" :autoplay="ifAutoplay" :circular="true" :interval="3000" :duration="500">
 			<swiper-item v-for="(item,index) in bannerList" :key="index">
 				<view @tap="chooseImg(index,item.url)" class="img-box">
 					<image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill"></image>
@@ -18,13 +18,10 @@
 </template>
 
 <script>
+	import { mapState } from 'vuex';
 	export default {
 		name:"swiper-pu",
 		props:{
-			isplay:{
-				type:Boolean,
-				default:false
-			},
 			isDot:{//是否显示指示点
 				type:Boolean,
 				default:true
@@ -56,6 +53,11 @@
 				default:false
 			}
 		},
+		computed: {
+			...mapState({
+				ifAutoplay: state => state.moduleA.ifAutoplay
+			})
+		},
 		data() {
 			return {
 				bcurrent: 0, // 默认当前选中项

pages/tabbar/pagehome/pagehome.vue

@@ -3,7 +3,7 @@
 		<status-container :ifReturn="false" titlet="传武佳小程序">
 			<view slot="content">
 				<view class="" style="margin-top: -20rpx;">
-					<swiper-pu :isplay="true" newBottom="20rpx" newHeight="460rpx"></swiper-pu>
+					<swiper-pu newBottom="20rpx" newHeight="460rpx"></swiper-pu>
 				</view>
 				<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
 			</view>
@@ -34,6 +34,14 @@
 				],
 			}
 		},
+		onShow() {
+			// 开启banner图自动轮播
+			this.$store.commit('setAutoplay',true);
+		},
+		onHide() {
+			// 关闭banner图自动轮播
+			this.$store.commit('setAutoplay',false);
+		},
 		onLoad() {
 			
 		},

store/actions.js

@@ -1 +0,0 @@
-// 根级别的 action

store/index.js

@@ -2,15 +2,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import moduleA from '@/store/modules/moduleA'
-import moduleB from '@/store/modules/moduleB'
 
 Vue.use(Vuex);//vue的插件机制
 
 //Vuex.modules 模块选项
 const store = new Vuex.Store({
 	modules: {
-		moduleA,
+		moduleA
-		moduleB
 	}
 })
 export default store

store/modules/moduleA.js

@@ -1,88 +1,13 @@
-// 购物车模块
 export default {
 	state:{//存放状态
 		token:'token已生成',
 		userInfo:{},
-		count:0,
+		ifAutoplay:false // 组件轮播是否自动播放
-		publicColor:'',
-		todos: [{
-				id: 1,
-				text: '我是内容一',
-				done: true
-			},
-			{
-				id: 2,
-				text: '我是内容二',
-				done: false
-			}
-		],
-		obj:{
-			a:'吃鸡腿',
-			b:'吃自助餐'
-		}
 	},
 	// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
 	mutations: {
-		add(state) {
+		setAutoplay(state,str) {
-			state.count = 7;
+			state.ifAutoplay = str;
-		},
-		add2(state, payload) {
-			state.count = payload.amount;
-		},
-		// 单个属性处理方法
-		setToken(state,str) {
-			state.token = str;
-		},
-		// 对象处理方法
-		updateUserInfo(state, payload) {
-			// 变更状态
-			state.userInfo = payload.userInfo;
-		},
-		// 新增字段方法
-		newProp(state,payload) {
-			state.obj = { ...state.obj, c: payload.c };
-		}
-	},
-	// 可以执行任意的同步和异步操作
-	actions:{
-		addCountAction ({commit}) {
-			commit('add')
-		},
-		addCountAction2 (context , payload) {
-			 context.commit('add2', payload)
-		},
-		// 异步方法
-		addCountAction3 (context , payload) {
-			setTimeout(function () {
-				context.commit('add2', payload)
-			 }, 2000)
-		},
-		actionA ({ commit }) {
-			return new Promise((resolve, reject) => {
-				setTimeout(() => {
-					commit('someMutation')
-					resolve()
-				}, 1000)
-			})
-		},
-		actionB ({ dispatch, commit }) {
-			return dispatch('actionA').then(() => {
-				commit('someOtherMutation')
-			})
-		}
-	},
-	// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
-	getters: {
-		doneTodos: state => {
-			return state.todos.filter(todo => todo.done)
-		},
-		doneTodosCount: (state, getters) => {
-			//state ：可以访问数据
-			//getters：访问其他函数，等同于 store.getters
-			return getters.doneTodos.length
-		},
-		getTodoById: (state) => (id) => {
-			return state.todos.find(todo => todo.id === id)
 		}
 	}
 }

store/modules/moduleB.js

@@ -1,87 +0,0 @@
-export default {
-	state:{//存放状态
-		token:'token已生成',
-		userInfo:{},
-		count:0,
-		publicColor:'',
-		todos: [{
-				id: 1,
-				text: '我是内容一',
-				done: true
-			},
-			{
-				id: 2,
-				text: '我是内容二',
-				done: false
-			}
-		],
-		obj:{
-			a:'吃鸡腿',
-			b:'吃自助餐'
-		}
-	},
-	// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
-	mutations: {
-		add(state) {
-			state.count = 7;
-		},
-		add2(state, payload) {
-			state.count = payload.amount;
-		},
-		// 单个属性处理方法
-		setToken(state,str) {
-			state.token = str;
-		},
-		// 对象处理方法
-		updateUserInfo(state, payload) {
-			// 变更状态
-			state.userInfo = payload.userInfo;
-		},
-		// 新增字段方法
-		newProp(state,payload) {
-			state.obj = { ...state.obj, c: payload.c };
-		}
-	},
-	// 可以执行任意的同步和异步操作
-	actions:{
-		addCountAction ({commit}) {
-			commit('add')
-		},
-		addCountAction2 (context , payload) {
-			 context.commit('add2', payload)
-		},
-		// 异步方法
-		addCountAction3 (context , payload) {
-			setTimeout(function () {
-				context.commit('add2', payload)
-			 }, 2000)
-		},
-		actionA ({ commit }) {
-			return new Promise((resolve, reject) => {
-				setTimeout(() => {
-					commit('someMutation')
-					resolve()
-				}, 1000)
-			})
-		},
-		actionB ({ dispatch, commit }) {
-			return dispatch('actionA').then(() => {
-				commit('someOtherMutation')
-			})
-		}
-	},
-	// Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性），对 state 的加工，是派生出来的数据。 可以在多组件中共享 getter 函数，这样做还可以提高运行效率。
-	getters: {
-		// doneTodos: state => {
-		// 	return state.todos.filter(todo => todo.done)
-		// },
-		// doneTodosCount: (state, getters) => {
-		// 	//state ：可以访问数据
-		// 	//getters：访问其他函数，等同于 store.getters
-		// 	return getters.doneTodos.length
-		// },
-		// getTodoById: (state) => (id) => {
-		// 	return state.todos.find(todo => todo.id === id)
-		// }
-	}
-}

store/mutations.js

@@ -1 +0,0 @@
-// 根级别的 mutation