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


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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
基于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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
对Python3 pyc 文件的使用详解
2019/02/16 Python
python自动发微信监控报警
2019/09/06 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
python3中sys.argv的实例用法
2020/04/24 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
自荐书模板
2013/12/15 职场文书
医科大学毕业生自荐信
2014/02/03 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
村干部培训班主持词
2014/03/28 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
验房委托书
2014/08/30 职场文书
稽核岗位职责
2015/02/10 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
培训后的感想
2015/08/07 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL