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


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 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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
动态新闻发布的实现及其技巧
2006/10/09 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
详解vue 图片上传功能
2019/04/30 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python CSV模块使用实例
2015/04/09 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python删除过期文件的方法
2015/05/29 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
市场总监岗位职责
2015/02/11 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
四群教育工作总结
2015/08/10 职场文书
Python基础之Socket通信原理
2021/04/22 Python
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL