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


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入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
DOM 中的事件处理介绍
Jan 18 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
JS基于Mootools实现的个性菜单效果代码
Oct 21 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
JavaScript数组排序的六种常见算法总结
Aug 18 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
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
JavaScript中this详解
2015/09/01 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Python Web开发模板引擎优缺点总结
2014/05/06 Python
python 示例分享---逻辑推理编程解决八皇后
2014/07/20 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
公司出纳岗位职责
2013/12/07 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL