优化banner图抖动

master
吃肉的饺子 2022-08-01 18:18:01 +08:00
parent abb869776b
commit c25a7efa7c
8 changed files with 21 additions and 176 deletions

1
.gitignore vendored
View File

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

View File

@ -1,6 +1,6 @@
<template> <template>
<view class="banner-box"> <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"> <swiper-item v-for="(item,index) in bannerList" :key="index">
<view @tap="chooseImg(index,item.url)" class="img-box"> <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> <image :style="{borderRadius:newRadius,height:newHeight}" class="img animated fadeIn" :src="item.imgSrc" mode="aspectFill"></image>
@ -18,13 +18,10 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex';
export default { export default {
name:"swiper-pu", name:"swiper-pu",
props:{ props:{
isplay:{
type:Boolean,
default:false
},
isDot:{// isDot:{//
type:Boolean, type:Boolean,
default:true default:true
@ -56,6 +53,11 @@
default:false default:false
} }
}, },
computed: {
...mapState({
ifAutoplay: state => state.moduleA.ifAutoplay
})
},
data() { data() {
return { return {
bcurrent: 0, // bcurrent: 0, //

View File

@ -3,7 +3,7 @@
<status-container :ifReturn="false" titlet="传武佳小程序"> <status-container :ifReturn="false" titlet="传武佳小程序">
<view slot="content"> <view slot="content">
<view class="" style="margin-top: -20rpx;"> <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> </view>
<swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab> <swiper-tab id="tab" :list="dataList" v-model="current" @changeEv="clickTab" :itemColor="'#e42417'" :lineColor="'#e42417'"></swiper-tab>
</view> </view>
@ -34,6 +34,14 @@
], ],
} }
}, },
onShow() {
// banner
this.$store.commit('setAutoplay',true);
},
onHide() {
// banner
this.$store.commit('setAutoplay',false);
},
onLoad() { onLoad() {
}, },

View File

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

View File

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

View File

@ -1,88 +1,13 @@
// 购物车模块
export default { export default {
state:{//存放状态 state:{//存放状态
token:'token已生成', token:'token已生成',
userInfo:{}, userInfo:{},
count:0, ifAutoplay:false // 组件轮播是否自动播放
publicColor:'',
todos: [{
id: 1,
text: '我是内容一',
done: true
},
{
id: 2,
text: '我是内容二',
done: false
}
],
obj:{
a:'吃鸡腿',
b:'吃自助餐'
}
}, },
// Vuex中store数据改变的唯一方法就是mutations 不适合异步方法 // Vuex中store数据改变的唯一方法就是mutations 不适合异步方法
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)
} }
} }
} }

View File

@ -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)
// }
}
}

View File

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