小程序常用

131 阅读2分钟

小程序轮播图的UI结构渲染

小程序做滚动效果

1.在data中定义 wh:0 2.在scoll-view标签内写 scroll-y="true" :style="{height:wh + 'px'}" 3.在onload中写 const sysInfo = uni.getSystemInfoSync() this.wh = sysInfo.windowHeight

小程序中默认选中导航栏中的第几个然后跳转

1.在data中写 activeindex:0,//左侧导航的索引,索引为几默认选择第几个 2.然后在有v-for的标签里把class改为如下 :class="['cate-left-item',i === activeindex ? 'active' : '']并添加点击事件@click="(名后面加(i))" 3.在methods中 写上点击事件的名字括号中用i 4.然后里面写 this.activeindex = i

切换页面后返回置顶效果

  1. 在scroll-view标签中写(和滚动在一个标签中) :scroll-top="scrollTop
  2. 在data中写 scrollTop : 0 3.在相对应的点击跳转的方法内写 this.scrollTop = Math.random()

搜索框为空不发起网络请求

在延时定时器第一行中写 if(!value.trim()){ this.kw(延时计时器的变量)=value console.log('发起请求',,this.kw) this.接发起网络请求的变量方法 }eles{ this.发起请求的变量 = }

搜索框固定办法

添加样式 position: sticky; top: 0;

搜索历史的去重优化

 const index = this.历史记录的方法名不加括号index of(this.关键字的变量)
 if(index >= 0){
 this.历史记录的方法名 =[...this.历史记录的变量.splice(index,1),...this.历史记录的变量]
                }else{
                this.历史记录的方法名.unshift(this.关键字变量)
                }
                

刷新后搜索历史不清空

uni.setStorageSync('关键词的变量',JSON.stringify(this.历史记录的变量))
然后在onload(){
this.历史变量名 = JSON.parse(uni.getStorageSync('关键词变量') || '[]')
}

在价格后面保留两位如198.00

在被循环的价格差值表达式中写{{Number(便利的价格).toFixed(2)}}

触底后更新数据

  onReachBottom(){
		console.log('我到底了')
		this.queryObj.pagenum += 1
		this.发起请求的方法名例如(getgoodsList())
	},

然后在更改设置页面数据的那行代码 this.变量名 = [...this.变量名,...this.res.message]