效果圖
wxml:
<!-- 橫向指示器 -->
<scroll-view scroll-x="true" class='scroll'>//橫向滾動
<view class='indicator'>//view相當於div
<block wx:for-items="{{indicatorList}}" wx:key="key">//block一般判斷語句我都放在這裏 wx:for-items="{{indicatorList}}"
//indicatorList是數據源（js中的data Json格式）
<view class='indicator_item' bindtap='indicatorListener' data-index="{{index}}"> //index也就是每一條數據源下標 0 1 2 3這樣的
//data-(index)這個index可以換名字data-ccindex都行 獲取下標的時候用的
//bindtap是一個監聽事件 監聽事件的發生 相當於安卓裏面的的 xxx.setOnclickListener()
<block wx:if="{{index==clickId}}">//判斷clickId與index是不是一樣 初始化 clickId爲0 也就是第一個頭條爲帶顏色的
<view style='color:#2D8BDE'>{{item}}</view>//這個item爲列表項
</block>
<block wx:else>//否則正常加載 不帶顏色
<view>{{item}}</view>
</block>
</view>
</block>
</view>
</scroll-view>
wxss://這個跟css寫法產不多
/* scrollView */
.scroll{
background: #f5f5f5;
white-space: nowrap;
}
/* 指示器 */
.indicator{
padding: 15rpx 10rpx;
flex-direction: row;
}
/* 指示器裏面的item */
.indicator_item{
padding-left: 10rpx;
padding-right: 10rpx;
font-size: 30rpx;
display: inline-block;
}
/* 去除滾動條 */
::-webkit-scrollbar{
width: 0;
height:0;
color: transparent;
}
js:對於一些操作都放在這裏
// pages/index2/index2.js
Page({
/**
* 頁面的初始數據
*/
data: {
indicatorList: ["頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條", "頭條",],//指示器數據 Json格式
clickId:0,//點擊的item
},
// 指示器監聽事件
indicatorListener:function(res){
wx.showToast({
title: '您點擊的是第' + res.currentTarget.dataset.index+'個',
icon:'none'
})//微信的toast 相當於安卓裏面的 toast.makeTest();
this.setData({
clickId:res.currentTarget.dataset.index
})//this.setData() 主要是賦值操作 this相當於java的本類對象 通過他可以調取函數 賦值
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})