uni-app开发小程序,笔记记录3 分类开发

最新推荐文章于 2024-01-02 11:02:58 发布

a136447572

最新推荐文章于 2024-01-02 11:02:58 发布

阅读量167

点赞数

分类专栏：小程序文章标签：小程序 uni-app 微信小程序

本文链接：https://blog.youkuaiyun.com/a136447572/article/details/129315886

版权

学习地址
零基础玩转微信小程序：黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)
uniapp - 黑马优购笔记地址
在这里插入图片描述

知识点
1 scroll-view 必须设置 height 属性

:style="{height:scrollHeight - 50  + 'px'}"  // :开头动态设置 参数 并用 { } 包裹

onLoad() {
   
      this.getCateList();
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight // 可用屏幕高度
      this.scrollHeight = uni.getSystemInfoSync().windowHeight 
},

brand	string	设备品牌	1.5.0
model	string	设备型号。新机型刚推出一段时间会显示unknown，微信会尽快进行适配。	
pixelRatio	number	设备像素比	
screenWidth	number	屏幕宽度，单位px	1.1.0
screenHeight	number	屏幕高度，单位px	1.1.0
windowWidth	number	可使用窗口宽度，单位px	
windowHeight	number	可使用窗口高度，单位px	
statusBarHeight	number	状态栏的高度，单位px	1.9.0
language	string	微信设置的语言

2 点击事件

@click="leftItemClick(i)"

3 class 动态添加类样式 [ ] + ‘’

:class="['left-box' , i == active ? 'active':'']"

4 跳转

uni.navigateTo({
   
   url: '/subpkg/goods_list/goods_list?cid=' + item2.cat_id
})

5 选中与未选中效果

	.left-box {
     

        xxxxx: xxxx;
        
        &.active {
   
        
           xxxxx: xxxx;
           
          &::before {
   
          
             xxxxx: xxxx;
          }
          
        }
	}

	.left-box {
   

        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: black;
        background-color: #efefef;

        &.active {
   
          color: #C00000;
          background-color: #ffffff;
          position

最低0.47元/天解锁文章