《微信小程序案例5》仿小米Lite小程序分类板块-两个纵向滚动区域独立互不影响
2024-05-11 07:18:31
一、小米Lite分类板块图
二、技术分解
1、布局是分为左右两个纵向滚动区域，使用 <scroll-view>
2、每个小菜单的如图片 标题等内容使用js里面的data来保存
3、如此多相似的结构使用wx:for循环
4、点击事件改变选中状态使用bindtap、data-xxx自定义传参到js
5、使用三元运算符动态增加或删除class样式
三、代码
wxml代码
<!--项目：仿小米Lite小程序的分类板块 时间：2022/09/17-18-->
<view class="parent"><!-- 左侧滚动区域 --><scroll-view style="height: calc(100vh);width:25vw;" scroll-y><view class="fa"><view class="son" wx:for="{{itemList}}" wx:key="{{item.id}}" bindtap="selected" data-id="{{item.id}}"><span class="{{item.select !=0 ? 'active' : ''}}">{{item.name}}</span></view></view></scroll-view><!-- 右侧滚动区域 --><scroll-view style="height: calc(100vh);width:75vw;" scroll-y><view class="fa"><view style="text-align: center;"><image src="{{test.imgUrl}}" mode="aspectFit" style="height: 100px;width: 275px;"></image></view><!-- 右侧中间导航栏 --><scroll-view style="height:36px; border-bottom: 1px solid #EBEBEB;" scroll-x><view class="xiaoMiMeau"><view class="{{item.select ? 'XiaomiSelect' : ''}} " wx:for="{{test.navigation}}">{{item.title}}</view></view></scroll-view><!-- 小板块 --><view class="item" wx:for="{{test.container}}"><view><view class="XiaomiMIXTitle">{{item.title}}</view><view><view class="xiaomiMixItem" wx:for="{{item.goods}}"><view class="xiaomiMixPic"><image src="{{item.imgUrl}}"></image></view><view class="xiaomiMixText"><view class="title">{{item.title}}</view><view class="price">￥{{item.price}}起 </view></view></view></view></view></view><!-- 小板块结束 --></view> <!-- fa结束 --></scroll-view> <!-- 右侧滚动区域结束 -->
</view><!-- parent结束 -->wxss代码
.parent{display: flex;justify-content: space-between;
}.son{width: 100px;height: 60px;line-height: 60px;font-size: 12px;color: #7A7A7A;
}
.son span{padding-left: 8px;
}
.active{color:#333333 ;border-left: 2px solid #FF5934;font-size: 13px;
}/* Xiaomi手机 */
.XiaomiMIXTitle{font-size: 14px;margin-left: 5px;margin-top: 5px;
}
.xiaoMiMeau{display: flex;width:calc(130px*4);font-size: 12px;color: #7A7A7A;
}
.xiaoMiMeau view{height: 28px;width: 120px;line-height: 28px;padding-left: 5px;
}
.XiaomiSelect{background:#EFEFEF ;
}
.xiaomiMixItem{display: flex;justify-content: space-between;height: 90px;width: 270px;background: #F8F8F8;margin: 10px auto;border-radius: 6px;
}
.xiaomiMixPic{margin: auto auto;width: 90px;
}
.xiaomiMixPic image{height: 70px;width: 70px;margin: auto auto;}
.xiaomiMixText{/* background: yellow; */margin: auto auto;color: #7A7A7A;font-size: 13px;width: 180px;
}
.title{margin-bottom: 8px;
}js代码
Page({/*** 页面的初始数据*/selected:function(e){//先把之前选中的变为false，只能循环遍历了for(var i=0;i<13;i++){var item=this.data.itemList[i]var flag=item.selectif(flag) {// item.select=false //一般的等号赋值方法无效var select = 'itemList['+i+'].select'this.setData({[select]:0})}}//获取wxml自定义数据data-id的值var id = e.currentTarget.dataset.id // this.data.itemList[id].select=true //一般的等号赋值方法沒有用//微信小程序自己的修改data数据的方法setData({ })var select = 'itemList['+id+'].select'this.setData({[select]:1})//bug:点击事件发生后只改变了点击的view的样式，而上一个选择状态的样式任然没有删除//解决方法：把select的值换成数字，不使用true false。wxml代码处三元运算符处改用class="{{item.select !=0 ? 'active' : ''}}"// 点击事件过后需要更新右侧板块的内容this.setData({test:this.data.menuList[id]})},data: {itemList: [{name: '推荐', id: 0, select: 0},{name: 'Xiaomi手机', id: 1, select: 1},{name: 'Redmi手机', id: 2, select: 0},{name: '游戏手机', id: 3, select: 0},{name: '电脑平板', id: 4, select: 0},{name: '智能穿戴', id: 5, select: 0},{name: '电视', id: 6, select: 0},{name: '大家电', id: 7, select: 0},{name: '小家电', id: 8, select: 0},{name: '智能家居', id: 9, select: 0},{name: '出行运动', id: 10, select: 0},{name: '日用百货', id: 11, select: 0},{name: '儿童用品', id: 12, select: 0}],// 把所有右侧导航栏放入menuList数组里面，每一个小项目就是一个对象// 页面加载一开始把xiaomi手机信息赋值给test，在wxml渲染时用test即可,而后每一次点击事件发生只需把改变后的内容赋值给test即可，从而不需要去改变wxml的相关代码test:{},menuList:[{name:'推荐',id:0,imgUrl:"/img/tuijian/tuijian.png",container:[{title:"精选推荐",goods:[{imgUrl:"/img/tuijian/sh.png",title:"小米手环7",price:"239"},{imgUrl:"/img/tuijian/sb.png",title:"Redmi 手表 2",price:"379"},{imgUrl:"/img/tuijian/sh.png",title:"小米手环7",price:"239"},{imgUrl:"/img/tuijian/sb.png",title:"Redmi 手表 2",price:"379"},]}]},{name:'Xiaomi手机',id:1,imgUrl:"/img/XiaomiImg/01.jpg",navigation:[{title:"Xiaomi MIX系列",select:true},{title:"Xiaomi 数字系列",select:false},{title:"Xiaomi Civi",select:false},{title:"手机配件",select:false}],container:[{title:"Xiaomi MIX系列",goods:[{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi MIX Fold 2",price:"8999"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi MIX 4",price:"4199"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"MIX FOLD折叠屏手机",price:"6999"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi Mix Alpha",price:"19999"}]},{title:"Xiaomi 数字系列",goods:[{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S Ultra",price:"5999"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S Pro",price:"4699"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S",price:"3999"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12 Pro 天玑版",price:"19999"}]},{title:"Xiaomi Civi",goods:[{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S Ultra",price:"5999"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S Pro",price:"4699"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S",price:"3999"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12 Pro 天玑版",price:"19999"}]},{title:"手机配件",goods:[{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S Ultra",price:"5999"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S Pro",price:"4699"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12S",price:"3999"},{imgUrl:"/img/XiaomiImg/XiaomiMIXFold2.jpg",title:"Xiaomi 12 Pro 天玑版",price:"19999"}]}]} ,// Redmi手机内容{name:'Redmi手机',id:2,imgUrl:"/img/Redmi/Redmi.png",navigation:[{title:"K系列",select:true},{title:"Note系列",select:false},{title:"数字系列",select:false},{title:"Redmi手机配件",select:false}],container:[{title:"K系列",goods:[{imgUrl:"/img/Redmi/RedmiK50.png",title:"Redmi K50 至尊版",price:"2999"},{imgUrl:"/img/Redmi/K50Pro.png",title:"Redmi K50 至尊版",price:"2999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi K50 至尊版",price:"6999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi K50 至尊版",price:"19999"}]},{title:"Note系列",goods:[{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"}]},{title:"数字系列",goods:[{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"}]},{title:"Redmi手机配件",goods:[{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"},{imgUrl:"/img/Redmi/k50.png",title:"Redmi Note 11T Pro+",price:"1999"}]}]},{name: '游戏手机', id: 3,imgUrl:"/img/gamePhone/gamePhone.png",navigation:[{title:"游戏手机",select:true},{title:"游戏手机配件",select:false}],container:[{title:"K系列",goods:[{imgUrl:"/img/gamePhone/hs5.png",title:"黑鲨5 高能版",price:"2499"},{imgUrl:"/img/gamePhone/hs5.png",title:"黑鲨5 高能版",price:"2499"},{imgUrl:"/img/gamePhone/hs5.png",title:"黑鲨5 高能版",price:"2499"},{imgUrl:"/img/gamePhone/hs5.png",title:"黑鲨5 高能版",price:"2499"},{imgUrl:"/img/gamePhone/hs5.png",title:"黑鲨5 高能版",price:"2499"},]}]},{name: '电脑平板', id: 4,imgUrl:"/img/pcIpad/pcipad.png",navigation:[{title:"小米平板",select:true},{title:"笔记本2022",select:false},{title:"RedmiBook",select:false},{title:"小米笔记本",select:false},{title:"显示器",select:false},{title:"办公配件",select:false}],container:[{title:"小米平板",goods:[{imgUrl:"/img/pcIpad/xiaomiipad.png",title:"小米平板5 Pro 12.4",price:"2799"},{imgUrl:"/img/pcIpad/xiaomiipad.png",title:"小米平板5 Pro 12.4",price:"2799"},{imgUrl:"/img/pcIpad/xiaomiipad.png",title:"小米平板5 Pro 12.4",price:"2799"},{imgUrl:"/img/pcIpad/xiaomiipad.png",title:"小米平板5 Pro 12.4",price:"2799"},{imgUrl:"/img/pcIpad/xiaomiipad.png",title:"小米平板5 Pro 12.4",price:"2799"},{imgUrl:"/img/pcIpad/xiaomiipad.png",title:"小米平板5 Pro 12.4",price:"2799"},{imgUrl:"/img/pcIpad/xiaomiipad.png",title:"小米平板5 Pro 12.4",price:"2799"},]}]},{name: '智能穿戴', id: 5},{name: '电视', id: 6},{name: '大家电', id: 7},{name: '小家电', id: 8},{name: '智能家居', id: 9},{name: '出行运动', id: 10},{name: '日用百货', id: 11},{name: '儿童用品', id: 12},],},/*** 生命周期函数--监听页面加载*/onLoad(options) {// 页面加载一开始把xiaomi手机信息赋值给test，在wxml渲染时用test即可,而后每一次点击事件发生只需把改变后的内容赋值给test即可，从而不需要去改变wxml的相关代码this.setData({test:this.data.menuList[1]})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}})四、自己写的效果
五、总结
这个小案例花了一天事件研究，对开发微信小程序有了基本认识，特别是对以下知识点：
- wx:for循环
- bindtap点击事件
- data-xxx自定义数据传参
- js里面的data数据绑定
- 修改data中数组中的某个值的方法
- 动态增加删除class样式
改进版，使用了egg服务器建立mysql数据库的连接实现数据的交互：
CSDNhttps://mp.csdn.net/mp_blog/creation/editor/126971641
《微信小程序案例5》仿小米Lite小程序分类板块-两个纵向滚动区域独立互不影响相关推荐
- 微信小程序开发：e代驾Lite小程序分析
微信小程序开发:e代驾Lite是一款专业提供"到达快,服务好,保障全"代驾服务的小程序.通过移动互联网技术改善传统代驾服务行业,在大大降低代驾等候时间和代驾服务费用的同时,更 ...
- android小程序案例_这几个小程序案例告诉你，小程序该怎么做！
很多新手想做小程序,但却不知道好的小程序应该做成什么样子.下面就跟大家分享几个做得比较好的微信小程序案例,你可以从这些案例中学习一下,然后再做自己的小程序. 1.商城小程序案例 商城小程序如今是比较常 ...
- 在c语言中卖水果的程序,案例 | 卖生鲜水果的小程序怎么做？这个生鲜小程序做到了60天销售额超2...
原标题:案例 | 卖生鲜水果的小程序怎么做?这个生鲜小程序做到了60天销售额超2 在辽宁省大连普湾新区,有一家水果店和传统水果店一样做着门店生意,2018年,他牵手微炫客,尝试小程序电商,借助微炫客微 ...
- 案例：仿小米logo渐变效果练习
一.效果: 仿小米logo 二.布局思路 三.代码: 代码如下(示例): <!DOCTYPE html> <html lang="en"><head& ...
- 自定义桌面小部件【搞定小米MIUI小部件】
最近相信大家都坐着小板凳听了MIUI的内容吧.当然了MIUI小部件可以说让MIUI上档次了许多,作为开发者的你是否为之惊叹?当然了我看到了许多的貌似自定义的简单操作,当然了大多数都是可爱简约的背景加动 ...
- 一个带时间的相册页面（仿小米相册）
一个带时间的相册页面,真小米手机仿小米相册 这个我研究了两天,真要命,昨晚搞出来的.在这里我们用了以下gradle: compile 'com.android.support:cardview-v7: ...
- 小程序之仿小米商城Lite
前言 关于小程序,在这里有一句话送给正准备阅读的你-世界上本没有坑,路走的多了就有了:世界上本没有路,坑填的多了就有了.嗯~~~这句话就是作为第一次做仿小程序项目的我,历经'磨难'得出来的肺腑之言.好 ...
- 基于微信小程序开发的仿微信demo
(本文参考自github/liujians,地址:https://github.com/liujians/weApp) 作者声明: 基于微信小程序开发的仿微信demo 整合了ionic的样式库和we ...
- 微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布 效果图 效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
最新文章
- 多个PHP版本环境搭建（nginx,php)
- java future设计模式
- r语言t检验输出检验统计量_数据统计的理解和运用（四）列联表之卡方检验
- Nacos（十二）之Java SDK
- Flex与JavaScript的交互：调用JavaScipt或者被JavaScript调用
- [zz]很详细，涵盖了多数场景！推荐 - python 的日志logging模块学习
- 超全、超详的Spring Boot配置讲解笔记
- Atitit 软件程序的定义 软件广义定义 程序代码，文档 ，数据 方法，规则， 狭义定义 软件=程序+数据+文档 软件(英文:Software)是一系列按照特定顺序组织的计算机数据和指
- vue-router的两种模式
- 如何快速的把JSON转Excel怎么转？
- java实训鉴定表_java实习自我鉴定材料定稿（资料4）
- java求第n项斐波那契_【剑指offer】数列——求斐波那契第n项
- photoshop图层解锁及不能解锁的原因
- arduino液晶显示屏与温湿度传感器连接
- feed流和瀑布流_推荐系统之Feed流UI交互设计
- 图像拼接缝融合之加权融合
- sql server 2012创建学生数据库
- COMSOL with Matlab连接
- 【Node.js】初学
- 大数据平台安全研究报告2021