uni-app学习(二)
程序员文章站
2022-03-07 23:17:31
1. uni app学习(二) 1.1. 好用css记录 1. 一定透明度的背景色 1.2. 好用的代码段 1. store(用户登录) 2. 窗口宽高 3. store汇总 1.3. storage封装 引入 1.4. 节点布局交叉状态 1. uni.createIntersectionObser ......
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<height){ mode=false; } state.screen={ mode, width, height }; } },actions: { } }
// 监听窗口宽高变化 (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. 布局上遇到的问题
- 想实现类似饿了吗的悬浮框效果,即上移过程中,中间的某个组件框到顶部后不再上移,呈类似置顶效果
- 参考