微信小程序实现跟随菜单效果和循环嵌套加载数据


Posted in Javascript onNovember 21, 2017

本文实例为大家分享了微信小程序实现跟随菜单效果、微信小程序循环嵌套加载数据,供大家参考,具体内容如下

效果如图:

微信小程序实现跟随菜单效果和循环嵌套加载数据

代码如下:

wxml

//使用循环嵌套data数据格式写对即可
<scroll-view class="left" scroll-y>  
  <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}" bindtap="tap">
   {{item.txt}}
  </view>
 </scroll-view>

<scroll-view class="right" scroll-y bindscroll="scroll" scroll-into-view="{{toView}}">
  <view id="{{item.id}}" wx:for="{{right}}">

   <view class="title">
    <text class="line"></text>
    {{item.txt}}
    <text class="line"></text>
   </view> 

   <view class="li" wx:for="{{item.li}}">
    <image src="{{item.src}}"></image>
    <text class="name">{{item.name}}</text>
   </view>

  </view>
 </scroll-view>

js

Page({
 data: {
  toView: 'red1',
  _click:0,
  left: [{ txt: '新品', id: 'new' }, { txt: '手机', id: 'phone' }, { txt: '电视', id: 'mv' }, { txt: '电脑', id: 'computer' }],
  right: [
   { txt: '新品', id: 'new',li: [{ src: '../../assets/images/max1.jpg', name: '小米noto' }, { src: '../../assets/images/max1.jpg', name: '小米mix' }, { src: '../../assets/images/max3.jpg', name: '小米5c' }, { src: '../../assets/images/max2.jpg', name: '小米notp' }, { src: '../../assets/images/max2.jpg', name: '小米note5' }, { src: '../../assets/images/max2.jpg', name: '小米6' }]}, 
   { txt: '手机', id: 'phone',li: [{ src: '../../assets/images/max2.jpg', name: '小米6s' }, { src: '../../assets/images/max3.jpg', name: '小米max' }, { src: '../../assets/images/max2.jpg', name: '小米5s' }, { src: '../../assets/images/max1.jpg', name: '小米li' }, { src: '../../assets/images/max3.jpg', name: '小米4' }, { src: '../../assets/images/max1.jpg', name: '小米max' }]}, 
   { txt: '电视', id: 'mv', li: [{ src: '../../assets/images/max3.jpg', name: '小米6' }, { src: '../../assets/images/max2.jpg', name: '小米mix' }, { src: '../../assets/images/max1.jpg', name: '小米7s' }, { src: '../../assets/images/max3.jpg', name: '小米2' }, { src: '../../assets/images/max1.jpg', name: '小米note7' }, { src: '../../assets/images/max3.jpg', name: '小米8' }] }, 
   { txt: '电脑', id: 'computer', li: [{ src: '../../assets/images/max1.jpg', name: '小米2' }, { src: '../../assets/images/max1.jpg', name: '小米mix' }, { src: '../../assets/images/max2.jpg', name: '小米max' }, { src: '../../assets/images/max1.jpg', name: '小米6' }, { src: '../../assets/images/max3.jpg', name: '小米note' }, { src: '../../assets/images/max1.jpg', name: '小米max' }] }]
 },

 scroll: function (e) {
  console.log(e)//右侧列表滑动-左侧列表名称样式跟着改变,然而我不会写,搁置中,谁会告诉我,谢谢!
 },
 tap: function (e) { 
  var j = parseInt(e.currentTarget.dataset.i);
  this.setData({
   toView: this.data.left[j].id,//控制视图滚动到为此id的<view>
   _click:j           //控制左侧点击后样式
    })
 },
})

wxss

page{border-top:1px solid #f6f6f6;}

.left{
 height:100%;
 width: 19%;
 display: inline-block;
 background:#fff;
 text-align:center;
 border-right:1px solid #eee;
 }
.leftlist{
 font-size:12px;
 padding:10px;
 }

.right{
 height:100%;
 width: 80%;
 display: inline-block;
 background:#fff;
 text-align:center;
 }

.line{
 width:15px;
 height:1px;
 background:#ddd;
 display:inline-block;
 vertical-align:super;
 margin:0 15px;
}

.li{ 
 height:10%;
 width:30%;
 display:inline-block;
 text-align:center;
}

.li image{width:60px;height:60px;}

.li .name{
 font-size:12px;
 display:block;
 color:#888;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}

.title{padding:20px 0;}
.yes{color: #f99;font-size: 14px;}

友情提示:

1、左侧点击样式改变:

利用自身index与点击的元素的index比较。
data-i=“{{获取当前index传给_click保存}}”,
class=”leftlist {{index==_click?'yes':”}}”,
此处index是自身的,如果自身和点击的一致就添加,yes类名,否侧滞空清除yes样式。

2、点击左侧,右侧跟随:

利用scroll-into-view=”{{id}}”, 视图会滚动到id为此id的view标签。我是直接从data数据里取得id,也可以直接获取点击元素id。

3、循环嵌套:data数据格式写对,按照官方文档就行。

Javascript 相关文章推荐
JavaScript 滚轮事件使用说明
Mar 07 Javascript
js中获取事件对象的方法小结
Mar 13 Javascript
如何使用Javascript获取距今n天前的日期
Jul 08 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 #Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 #Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 #Javascript
微信小程序实现tab切换效果
Nov 21 #Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 #Javascript
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
php curl模拟post请求小实例
2013/11/13 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php处理带有中文URL的方法
2016/07/11 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
2016/07/11 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
python编程实现归并排序
2017/04/14 Python
学生信息管理系统python版
2018/10/17 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
基于keras中的回调函数用法说明
2020/06/17 Python
详解python with 上下文管理器
2020/09/02 Python
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
实习教师自我鉴定
2013/09/27 职场文书
合同专员岗位职责
2013/12/18 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
制作能在nginx和IIS中使用的ssl证书
2021/06/21 Servers
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android