First look at renderings, the first to write blog ............
1. The first is wxml page
<-! Navigation Categories ->
<view class='nav_fl'>
<view wx:for="{{goodlist}}" data-index="{{index}}" data-id="b{{index}}" bindtap='tap'>{{item.name}}
<text class='{{index==navActive?"navactive":""}}'>---</text>
</view>
</view>
<view style='clear:both;'></view>
<-! Scroll section ->
<scroll-view class='scrollView' scroll-y="true" scroll-into-view="{{toView}}" style='height:{{height}}rpx;' bindscroll="scroll" scroll-with-animation='true'>
<view wx:for="{{goodlist}}" wx:for-index="indexOut" id="b{{indexOut}}">
<view class='listImg'>
<image style='width:100%;height:290rpx;' src='{{item.img}}'></image>
<Text> Sold: 200 </ text>
</view>
<view class='listName'>{{item.title}}</view>
<view class='listId'>{{item.desc}}</view>
<view class='listImg'>
<image style='width:100%;height:290rpx;' src='{{item.img}}'></image>
<Text> Inventory: 300 </ text>
</view>
<view class='listName'>{{item.title}}</view>
<view class='listId'>{{item.desc}}</view>
<view class='listImg'>
<image style='width:100%;height:290rpx;' src='{{item.img}}'></image>
<Text> Reservation: 100 </ text>
</view>
<view class='listName'>{{item.title}}</view>
<view class='listId'>{{item.desc}}</view>
</view>
</scroll-view>
A portion of the picture on their own borders thousand million
2.css here to write a very simple interface can write your own landscaping Kazakhstan
.nav_fl{
width: 100%;
height: 30px;
display: flex;
justify-content: space-between;
}
.navactive{
width: 60px;
height: 1px;
color:orange;
}
3. It is important js coming
// pages/scroll/scroll.js
Page({
/**
* Initial data page
*/
data: {
goodlist: [{ name: "水果", title: "水果", desc: "aa", img: "/images/photo13.jpg" }, { name: "早餐", title: "早餐", desc: "aa", img: "/images/photo13.jpg" }, { name: "午餐", title: "午餐", desc: "aa", img: "/images/photo13.jpg" }, { name: "晚餐", title: "晚餐", desc: "aa", img: "/images/photo13.jpg" },]
},
/**
* Life Cycle function - listen for page loads
*/
onLoad: function (options) {
var that = this;
// set height Product List
wx.getSystemInfo({
success: function (res) {
that.setData({
// height:1140
height: res.windowHeight*2-60,
})
},
});
},
tap: function (e) {
console.log(e);
was id = e.currentTarget.dataset.id;
var index = e.currentTarget.dataset.index;
this.setData({
toView: id,
navActive: index
});
},
// first obtain from the top part of the height, when the slide reaches a height corresponding to the listening position;
// Get a list of goods, produce highly collection
// page position corresponding to a respective slide navigational cues
scroll: function(e) {
console.log(e);
var that = this;
var height = 0;
var number = 0
was hightArr = [];
for (var i = 0; i <that.data.goodlist.length; i ++) {// goodlist herein refers to a corresponding set of commodities
// Get the position where the element
wx.createSelectorQuery().select('#b' + i).boundingClientRect(function (rect) {
number = rect.height + number;
hightArr.push(number);
that.setData({
hightArr: hightArr
})
}).exec();
console.log(that.data.hightArr);
};
console.log(e.detail.scrollTop);
var scrollTop = e.detail.scrollTop;
var scrollArr = that.data.hightArr;
for (var i = 0; i < scrollArr.length; i++) {
if (scrollTop >= 0 && scrollTop < scrollArr[0]) {
the console.log ( "first ah");
if (0 != this.data.lastActive) {
this.setData({
navActive: 0,
lastActive: 0
})
}
} else if (scrollTop >= scrollArr[i - 1] && scrollTop <= scrollArr[i]) {
the console.log ( "This is the first" + i + "th");
if (i != this.data.lastActive) {
this.setData({
navActive: i,
lastActive: i
})
}
}
}
},
/**
* Life Cycle function - listen for the first time the page rendering is complete
*/
onReady: function () {
},
/**
* Life Cycle functions - page display monitor
*/
onShow: function () {
},
/**
* Life Cycle function - monitor page Hide
*/
onHide: function () {
},
/**
* Life Cycle function - monitor page unload
*/
onUnload: function () {
},
/**
* Page-related event handler - the drop-down monitor user actions
*/
onPullDownRefresh: function () {
},
/**
* Bottoming event handler to pull the page
*/
onReachBottom: function () {
},
/**
* User top right, click Share
*/
onShareAppMessage: function () {
}
})