微信小程序之漢字菜單欄

實(shí)現(xiàn)該功能的思路：通過點(diǎn)擊左側(cè)滑欄的某一項(xiàng)，獲取到該元素?cái)y帶的 id 夷家，然后動態(tài)傳給右側(cè)滑欄的 scroll-into-view 蒸其，從而實(shí)現(xiàn)右側(cè)滑欄對應(yīng)的該元素運(yùn)動置頂。

以下為完整數(shù)據(jù)

數(shù)據(jù)格式：

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內(nèi)容：

<view class="container">?

? <!--左側(cè)欄-->

? <scroll-view class='scroll_left' scroll-y="true">

? ? <view class="nav_left">

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

? ? ? ? <!--當(dāng)前項(xiàng)的id等于item項(xiàng)的id库快，那個(gè)就是當(dāng)前狀態(tài)-->?

? ? ? ? <!--用data-index記錄這個(gè)數(shù)據(jù)在數(shù)組的下標(biāo)位置摸袁，使用data-id設(shè)置每個(gè)item的id值，供打開右側(cè)側(cè)滑欄使用-->?

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

? ? ? </block>?

? ? </view>

? </scroll-view>

? <!--右側(cè)欄-->

? <!--如果使用 scroll-into-view 屬性义屏，必須設(shè)置 scroll-view 的高度但惶，且最好是動態(tài)獲取屏幕高度 -->

? <!-- scroll-into-view 屬性 值應(yīng)為某子元素id（id不能以數(shù)字開頭）。設(shè)置哪個(gè)方向可滾動湿蛔，則在哪個(gè)方向滾動到該元素 -->

? <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}}</view>

? ? ? ? ? <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}}"></image>

? ? ? ? ? ? ? ? ? <view >?

? ? ? ? ? ? ? ? ? ? <text>{{item.desc}}</text>?

? ? ? ? ? ? ? ? ? </view>

? ? ? ? ? ? ? ? </view>?

? ? ? ? ? ? ? </navigator>?

? ? ? ? ? ? </view>? ? ?

? ? ? ? ? </block>

? ? ? ? </view>

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

? ? </view>

? </scroll-view>

</view>?

js內(nèi)容：

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

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

Page({

? data: {

? ? // 左側(cè)點(diǎn)擊類樣式

? ? curNav: 'A',

? },

? onReady: function () {

? ? // 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成

? ? var listChild1 = list.List[0];

? ? var that = this;

? ? // 獲取可視區(qū)高度

? ? wx.getSystemInfo({

? ? ? success: function (res) {

? ? ? ? that.setData({

? ? ? ? ? list: listChild1,

? ? ? ? ? winHeight: res.windowHeight,

? ? ? ? })

? ? ? }

? ? })

? },

? //點(diǎn)擊左側(cè) tab 膀曾，右側(cè)列表相應(yīng)位置聯(lián)動 置頂

? switchRightTab: function (e) {

? ? var id = e.target.id;

? ? console.log(typeof id)

? ? this.setData({

? ? ? // 動態(tài)把獲取到的 id 傳給 scrollTopId

? ? ? scrollTopId: id,

? ? ? // 左側(cè)點(diǎn)擊類樣式

? ? ? 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;?

}?

?

/*左側(cè)欄主盒子*/?

.nav_left{?

? /*設(shè)置行內(nèi)塊級元素（沒使用定位）*/?

? display: inline-block;?

? width: 100%;?

? height: 100%;?

? /*主盒子設(shè)置背景色為灰色*/?

? background: #fff;?

? text-align: center;?

? /* position: fixed;? */

? left: 0;

? top: 0;

? border-top: 1rpx solid #dedede;

}?

/*左側(cè)欄list的item*/?

.nav_left .nav_left_items{?

? background: #fff;

? /*每個(gè)高30px*/?

? height: 80rpx;?

? /*垂直居中*/?

? line-height: 80rpx;?

? /*再設(shè)上下padding增加高度阳啥，總高42px*/?

? padding: 15rpx 0;?

? /*只設(shè)下邊線*/?

? border-bottom: 1px solid #dedede;?

? /*文字14px*/?

? font-size: 29rpx;

? color: #101010;?

? font-weight:

}?

/*左側(cè)欄list的item被選中時(shí)*/?

.nav_left .nav_left_items.active{?

? /*背景色變成白色*/?

? background: #f0f4f7;

? color: #ed1000;?

}?

?

/*右側(cè)欄主盒子*/?

.scroll_right{?

? /*右側(cè)盒子使用了絕對定位*/?

? 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%;

}

/*右側(cè)欄list的item*/?

.nav_right_items{?

? /*浮動向左*/?

? float: left;?

? /*每個(gè)item設(shè)置寬度是33.33%*/?

? width: 50%;?

? /* height: 160rpx;? */

? text-align: center;

? color: #4a4a4a;

? background: #fff;

}?

.nav_right_items image{?

? /*被圖片設(shè)置寬高*/?

? width: 60px;?

? height: 50px;

? margin-top: 15rpx;

}?

.nav_right_items text{?

? /*給text設(shè)成塊級元素*/?

? display: block;?

? margin-top: 5rpx;?

? margin-bottom: 10rpx;

? font-size: 26rpx;?

? /*設(shè)置文字溢出部分為...*/?

? overflow: hidden;?

? white-space: nowrap;?

? text-overflow: ellipsis;?

}

/** 自定義其他點(diǎn)擊態(tài)樣式類 **/

.other-navigator-hover{

? background:#fff;

}

.scroll_left{

? width:25%;

? height:100%;

? background:#fff;

? text-align:center;

? position: fixed;

? left: 0;top: 0

}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末察迟，一起剝皮案震驚了整個(gè)濱河市斩狱，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌扎瓶，老刑警劉巖所踊，帶你破解...
    沈念sama閱讀 222,000評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異概荷，居然都是意外死亡秕岛，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,745評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門误证，熙熙樓的掌柜王于貴愁眉苦臉地迎上來继薛，“玉大人，你說我怎么就攤上這事愈捅《艨迹” “怎么了？”我有些...
    開封第一講書人閱讀 168,561評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵蓝谨，是天一觀的道長灌具。 經(jīng)常有香客問我青团，道長，這世上最難降的妖魔是什么咖楣？ 我笑而不...
    開封第一講書人閱讀 59,782評論 1贊 298
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任督笆，我火速辦了婚禮，結(jié)果婚禮上截歉，老公的妹妹穿的比我還像新娘胖腾。我一直安慰自己烟零，他們只是感情好瘪松，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,798評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著锨阿，像睡著了一般宵睦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上墅诡，一...
    開封第一講書人閱讀 52,394評論 1贊 310
  • 城市分裂傳說
    那天壳嚎，我揣著相機(jī)與錄音，去河邊找鬼末早。 笑死烟馅，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的然磷。 我是一名探鬼主播郑趁，決...
    沈念sama閱讀 40,952評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼姿搜！你這毒婦竟也來了寡润？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,852評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤舅柜，失蹤者是張志新（化名）和其女友劉穎梭纹，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體致份，經(jīng)...
    沈念sama閱讀 46,409評論 1贊 318
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡变抽，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,483評論 3贊 341
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了氮块。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞬沦。...
    茶點(diǎn)故事閱讀 40,615評論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖雇锡，靈堂內(nèi)的尸體忽然破棺而出逛钻，到底是詐尸還是另有隱情，我是刑警寧澤锰提，帶...
    沈念sama閱讀 36,303評論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布曙痘，位于F島的核電站芳悲，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏边坤。R本人自食惡果不足惜名扛，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,979評論 3贊 334
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望茧痒。 院中可真熱鬧肮韧，春花似錦、人聲如沸旺订。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0贊 24
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽区拳。三九已至拘领，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間樱调，已是汗流浹背约素。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留笆凌，地道東北人圣猎。 一個(gè)月前我還...
    沈念sama閱讀 49,041評論 3贊 377
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像乞而，于是被迫代替她去往敵國和親送悔。 傳聞我的和親對象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,630評論 2贊 359

推薦閱讀更多精彩內(nèi)容