优化banner图抖动
parent
abb869776b
commit
c25a7efa7c
|
|
@ -2,6 +2,7 @@
|
|||
/node_modules
|
||||
/public/storage
|
||||
/unpackage
|
||||
/unpackage/dist
|
||||
/.hbuilderx
|
||||
Homestead.yaml
|
||||
Homestead.json
|
||||
|
|
|
|||
|
|
@ -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, // 默认当前选中项
|
||||
|
|
|
|||
|
|
@ -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 +0,0 @@
|
|||
// 根级别的 action
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 +0,0 @@
|
|||
// 根级别的 mutation
|
||||
Loading…
Reference in New Issue