IKEA WeChat Mini-Program: Animated Sticky Search Bar
Technical Breakdown
Recently, IKEA launched its WeChat Mini-Program.
In this article, we will break down its features and how to implement them if you wish to build something similar.
Custom Header
There’s usually a default header for WeChat Mini-Program
On IKEA’s homepage, we can see that logo and transparent control buttons. By the way, you can’t get rid of the control buttons on the right.
To remove the default header, add this in the app.json
In IKEA’s app, they didn’t make a custom header to share across all pages. They just removed the default header. And what you see is just the styles for the homepage.
To make a custom nav header, you can follow this:
Sticky Search Bar
They have a pretty smooth animated transition for the search bar. When the user scrolls down, the search bar sticks to the top and shrinks while the logo fades and the background changes color.
To achieve this, you will need to know the scroll position, so you can change the styles of the different elements accordingly.
This is where onPageScroll comes in.
In your javascript file, add onPageScroll , it returns an event object which has a scrollTop
scrollTop will increase the further down user scrolls.
The logic is that whenever a user scrolls past the search bar, we will do something to the styles.
So we will need to know the height of the search bar first, you can also just hardcode a number, but if the search bar change in the future, your code will break.
In onLoad , you can use createSelectorQuery() to get the element by class and its height.
Finally, in your onPageScroll , you will write some logic to determine if a user has scroll passed or not.
Now you have a variable passedHeader , that switches between true and false.
In your wxml , add passedHeader in double mustache brackets. This allow WeChat to interpret javascript within wxml
And the ? and : is just javascript’s ternary operator. If you don’t know about the ternary operator, here’s more info.
Essentially, when passedHeader is true, we add a class called sticky to the element
So in your wxss , you will .sticky to the classes that you want to change when the user scrolls up.
For the complete example, here’s the code.
After writing about the sticky search bar, I realized there’s no way I can fit all of IKEA mini-programs features in one article.
Here are other features observed:
- Back to Top Button
- Customized Carousel Indicators
- Swipeable Tabs
- Categorical Product Scroll
- Accordion Animation
- Floating Action Button
And the most interesting feature I found is their ability to detect products from a picture.
Obviously, this is not all done with the frontend. They probably have an image classification model trained with their product image. And the mini-program is only sending the image to the server for the model to make a prediction.
If this was helpful, please consider visiting https://shanghaicoders.com/
