chen
/
martial-arts
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化banner图抖动

master
吃肉的饺子 2022-08-01 18:18:01 +08:00
parent abb869776b
commit c25a7efa7c
8 changed files with 21 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

12
components/swipers/swiper-pu.vue
View File

@ -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, // 默认当前选中项

10
pages/tabbar/pagehome/pagehome.vue
View File

@ -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() {
},

1
store/actions.js
View File

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

4
store/index.js
View File

@ -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,
moduleB
moduleA
}
})
export default store

81
store/modules/moduleA.js
View File

@ -1,88 +1,13 @@
// 购物车模块
export default {
state:{//存放状态
token:'token已生成',
userInfo:{},
count:0,
publicColor:'',
todos: [{
id: 1,
text: '我是内容一',
done: true
},
{
id: 2,
text: '我是内容二',
done: false
}
],
obj:{
a:'吃鸡腿',
b:'吃自助餐'
}
ifAutoplay:false // 组件轮播是否自动播放
},
// 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)
setAutoplay(state,str) {
state.ifAutoplay = str;
}
}
}

87
store/modules/moduleB.js
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)
// }
}
}

1
store/mutations.js
View File

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