1. uni-app学习（二）
1.1. 好用css记录
- 一定透明度的背景色
background: rgba(255,255,255,.6);
1.2. 好用的代码段
- store（用户登录）
export default { state: { hasLogin: false, //登陆状态 loginProvider: "", //登陆方式 如 微信 openid: null, //应用id address: {}, //收货地址 userinfo: { nickName: "未登录", headimg: "../../static/image/logo.png", user_id: "123", individuality: "爱你一万年", address: "北京市西城区中南海大院1号", sex: "男", area: "北京-北京-东城区" } //用户信息 }, getters: { userinfo(state) { return state.userinfo; }, login(state) { return state.hasLogin; }, address(state) { return state.address; } }, mutations: { login(state, provider) { state.hasLogin = true; state.loginProvider = provider; }, logout(state) { state.hasLogin = false state.openid = null }, setOpenid(state, openid) { state.openid = openid }, setAddress(state, address) { state.address = address; }, setUserinfo(state, userinfo) { state.userinfo = userinfo; } }, actions: { isLogin: async function(context) { return await new Promise((resolve, reject) => { var hasLogin = context.state.hasLogin; console.log(context) if (!hasLogin) { uni.showModal({ title: "您还未登陆,立即登陆?", content: "请登陆后进行访问", success(e) { if (e.confirm) { //登陆 uni.navigateTo({ url: '../login/login' }) } else { context.commit('logout', "退出") console.log(context.state) console.log("放弃登陆") } } }) resolve(false) } else { resolve(true) } }) } }} - 窗口宽高
export default{ state: { screen:{ mode:true,//窗口宽度比高度 长 height:0,//窗口高度 width:0,//窗口宽度 } },getters:{ screen(state){ return state.screen; } },mutations: { screen(state,screen){ var width=screen.width || 720; var height=screen.height || 1440; var mode=true; if(width // 监听窗口宽高变化(function screenListener(){ uni.onWindowResize((res) => { that.$store.commit('screen',{width:res.size.windowWidth,height:res.size.windowHeight});// console.log('变化后的窗口宽度=' + res.size.windowWidth)// console.log('变化后的窗口高度=' + res.size.windowHeight)})})() - store汇总
index.js
import Vue from 'vue'import Vuex from 'vuex'import user from "./store.js"import win from "./win.js"Vue.use(Vuex)const store = new Vuex.Store({ modules:{ user:user, win:win }})export default store 1.3. storage封装
var Storage={ /** * 异步存入缓存 可对象可数组 * k string 键 * val array|object|string 缓存的内容 * expires int 有效期 */ set(k,val,expires){ var type= typeof val; var expires=expires || 300; return uni.setStorage({key:k,data:{data:val,expires:expires+(Date.parse(new Date())/1000),type:type},success: function () { console.log('保存成功') }}) },get(k,Func=function(){}){ try{ uni.getStorage({key: k, success: function (res) { var data=res.data; if(data.expires){ if(data.expires> (Date.parse(new Date())/1000)){ Func(data.data) return data.data; } // uni.removeStorage(k); try { uni.removeStorage(k); } catch (e) { // error } } }}) }catch(e){ console.log(e) return false; //TODO handle the exception } return false; },remove(k){ uni.removeStorage(k); },reset(){ // 获取本地说有缓存信息 删除过期的，超长的，净化系统 uni.getStorageInfo({ success: function (res) { console.log(res.keys); console.log(res.currentSize); console.log(res.limitSize); } }); }}var Sync={ set(k,val,expires){ var expires=expires || 300; var type= typeof val; if(type==='object'){ val =JSON.stringify(val) } return uni.setStorageSync(k,{data:val,expires:expires+(Date.parse(new Date())/1000),type:type}) },get(k){ try{ var data= uni.getStorageSync(k) || {}; // console.log(data) if(data.expires){ if(data.expires> (Date.parse(new Date())/1000)){ if(data.type==='object'){ return JSON.parse(data.data) } return data.data; } uni.removeStorageSync(k); try { uni.removeStorageSync(k); } catch (e) { // error } } }catch(e){ console.log(e) return false; //TODO handle the exception } return false; },reset(){ // 获取本地说有缓存信息 删除过期的，超长的，净化系统 try { const res = uni.getStorageInfoSync(); console.log(res.keys); console.log(res.currentSize); console.log(res.limitSize); } catch (e) { // error } }}export default { // CusBASE64: __BASE64, set:Storage.set,//异步 get:Storage.get, reset:Storage.reset, setSync:Sync.set,//同步 getSync:Sync.get, resetSync:Sync.reset // encoder:base64decode } 引入
import Storage from '@/common/utils/Storage.js'
1.4. 节点布局交叉状态
- uni.createIntersectionObserver，
- 作用：可以用来推断某些节点是否可以被用户看见、有多大比例可以被用户看见
1.5. TabBar操作
- uni.hideTabBar()
- 作用：隐藏TabBar，还有很多TabBar相关操作，参看
- 可以进行红点显示，角标显示等等
1.6. uni的节点选择器
- uni.createSelectorQuery()，可以用来选择特定节点进行操作，参看，用于懒加载图片
- 例子
uni.createSelectorQuery().selectAll('.lazy').boundingClientRect((images) => { images.forEach((image, index) => { if (image.top <= this.windowHeight) { this.list[image.dataset.index].show = true; } }) }).exec() - 当然图片自身有个属性可以设置懒加载，只是有一定局限性，参考，使用
lazy-load属性为true能达到同样的效果
1.7. 布局上遇到的问题
- 想实现类似饿了吗的悬浮框效果，即上移过程中，中间的某个组件框到顶部后不再上移，呈类似置顶效果
- 参考