登录注册写文章

2018-03-12

写bug我是专业的

2018-03-12

小程序学习案例1 商品列表左=>右联动

不少大神写的demo，其菜单栏主要以 A,B,C,D等字母为主，即A,B,C,D等字母为对应该项携带的 id（id不能为汉字或纯数字）。而现在写的项目菜单栏为汉字，所以需要改变数据格式，进而需要改变 wxml 中的循环嵌套和获取。以下为成型后效果，希望对各位有帮助，互相学习，共同进步。

实现该功能的思路：通过点击左侧滑栏的某一项，获取到该元素携带的 id ，然后动态传给右侧滑栏的 scroll-into-view ，从而实现右侧滑栏对应的该元素运动置顶。

以下为完整数据

数据格式：

···

var list = {

"List": [

{

'A': [

{ name: '白酒' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'B': [

{ name: '白酒1' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'C': [

{ name: '白酒2' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'D': [

{ name: '白酒3' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'E': [

{ name: '白酒4' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'F': [

{ name: '白酒5' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'G': [

{ name: '白酒6' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'H': [

{ name: '白酒7' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'I': [

{ name: '白酒8' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'J': [

{ name: '白酒9' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'K': [

{ name: '白酒10' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'L': [

{ name: '白酒11' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

],

'M': [

{ name: '白酒12' },

{ 'picture': '../../img/55ac9689Ncc876cf1.jpg', 'desc': '葡萄酒' },

{ 'picture': '../../img/56668c04N5cb325b7.jpg', 'desc': '洋酒' },

{ 'picture': '../../img/586e055eNf678fd52.png', 'desc': '汾酒' },

{ 'picture': '../../img/596d6f4eNb62c24c1.jpg', 'desc': '汾酒' }

]

}

],

}

module.exports = list;

···

wxml内容：

···

<view class="container">

<scroll-viewclass='scroll_left'scroll-y="true">

<viewclass="nav_left">

<blockwx:for="{{list}}"wx:for-index="idx"wx:for-item="itemName"wx:key="*this">

< !--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开右侧侧滑栏使用-->

<viewclass="nav_left_items {{curNav == idx ? 'active' : ''}}"bindtap="switchRightTab"data-index="{{index}}"data-id="{{item.id}}"id="{{idx}}">{{itemName[0].name}}

</block>

</view>

</scroll-view>

<scroll-view scroll-y="true" class="scroll_right" style="height:{{winHeight}}px;" scroll-into-view="{{scrollTopId}}" scroll-with-animation="true">

<view class="nav_right">

<view class='mink' wx:for="{{list}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this" bindscroll="scrollTop">

<view class='minl' id='{{idx}}'>{{itemName[0].name}}

<block wx:for="{{itemName}}" wx:for-index="idex" wx:key="*this" >

<view class="nav_right_items" wx:if="{{idex>0}}">

<navigator url="../detail/detail" hover-class="other-navigator-hover">

<view>

<image src="{{item.picture}}">

<view >

<text>{{item.desc}}

</view>

</view>

</navigator>

</view>

</block>

</view>

<view style="width:100%;height:30rpx;background:#f0f4f7">

</view>

</scroll-view>

</view>

···

js内容：

···

// pages/list-1/list-1.js

var list = require('../../utils/list.js')

Page({

data: {

// 左侧点击类样式

curNav: 'A',

},

onReady: function () {

// 生命周期函数--监听页面初次渲染完成

var listChild1 = list.List[0];

var that = this;

// 获取可视区高度

wx.getSystemInfo({

success: function (res) {

that.setData({

list: listChild1,

winHeight: res.windowHeight,

})

}

})

},

//点击左侧 tab ，右侧列表相应位置联动置顶

switchRightTab: function (e) {

var id = e.target.id;

console.log(typeof id)

this.setData({

// 动态把获取到的 id 传给 scrollTopId

scrollTopId: id,

// 左侧点击类样式

curNav:id

})

}

})

···

wxss代码 (样式可能会不全，需要引入weui.wxss文件)

···

/* pages/listers/listers.wxss */

/* pages/list-1/list-1.wxss */

/*总体主盒子*/

.container {

position: relative;

width: 100%;

height: 1220rpx;

background-color: #f0f4f7;

color: #939393;

}

/*左侧栏主盒子*/

.nav_left{

/*设置行内块级元素（没使用定位）*/

display: inline-block;

width: 100%;

height: 100%;

/*主盒子设置背景色为灰色*/

background: #fff;

text-align: center;

/* position: fixed; */

left: 0;

top: 0;

border-top: 1rpx solid #dedede;

}

/*左侧栏list的item*/

.nav_left .nav_left_items{

background: #fff;

/*每个高30px*/

height: 80rpx;

/*垂直居中*/

line-height: 80rpx;

/*再设上下padding增加高度，总高42px*/

padding: 15rpx 0;

/*只设下边线*/

border-bottom: 1px solid #dedede;

/*文字14px*/

font-size: 29rpx;

color: #101010;

font-weight:

}

/*左侧栏list的item被选中时*/

.nav_left .nav_left_items.active{

/*背景色变成白色*/

background: #f0f4f7;

color: #ed1000;

}

/*右侧栏主盒子*/

.scroll_right{

/*右侧盒子使用了绝对定位*/

position: fixed;

top: 0;

right: 0;

overflow: auto;

flex: 1;

/*宽度75%，高度占满，并使用百分比布局*/

width: 75%;

height: 100%;

padding: 20rpx;

box-sizing: border-box;

background-color: #f0f4f7;

border-top: 1rpx solid #dedede;

}

.mink::after{

display:block;content:'';clear:both;

}

.jiul,.jiul image{

width: 100%;

height: 170rpx;

}

.minl{

font-size: 29rpx;

color: #777;

text-align: left;

line-height: 60rpx;

float: left;

background: #f0f4f7;

width: 100%;

/* height: 50rpx; */

}

.mink{

width: 100%;

background: #fff;

height: 100%;

}

/*右侧栏list的item*/

.nav_right_items{

/*浮动向左*/

float: left;

/*每个item设置宽度是33.33%*/

width: 50%;

/* height: 160rpx; */

text-align: center;

color: #4a4a4a;

background: #fff;

}

.nav_right_items image{

/*被图片设置宽高*/

width: 60px;

height: 50px;

margin-top: 15rpx;

}

.nav_right_items text{

/*给text设成块级元素*/

display: block;

margin-top: 5rpx;

margin-bottom: 10rpx;

font-size: 26rpx;

/*设置文字溢出部分为...*/

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

/** 自定义其他点击态样式类 **/

.other-navigator-hover{

background:#fff;

}

.scroll_left{

width:25%;

height:100%;

background:#fff;

text-align:center;

position: fixed;

left: 0;top: 0

}

···

最后编辑于：2018.03.14 20:51:00

©著作权归作者所有,转载或内容合作请联系作者

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,980评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,178评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,868评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,498评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,492评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,521评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,910评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,569评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,793评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,559评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,639评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,342评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,931评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,904评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,144评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,833评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,350评论 2赞 342

推荐阅读更多精彩内容

问渠哪得清如许，为有源头活水来
题记：心怀感恩，常思愧疚，好好学习…… 10月26至29日，2017年无为县小学校长提高培训班在合...
毛敏_d2d1阅读 785评论 0赞 0
急诊科的故事
第一天就是夜班，一下子蒙了头，还没明白急诊科还分内科和外科，就跟着上夜班。可能天气不好，第一晚就是接二连三的车祸...
天天天不蓝a阅读 429评论 0赞 0
2017.1.24
终于过上了之前上班时一直奢望的生活，每天海边走走，不必担心下午上班迟到，再找个地方边喝茶边看一本喜爱的书，累了倦了...
心间明月阅读 147评论 0赞 1

赞1赞

赞赏

手机看全文