关键词:
效果描述:当下拉的时候渐变产生对固定的搜索框
import React, { Component } from "react"; import { connect } from "react-redux"; import { Container, Header, Title, Content, Button, Icon, Left, Right, Body, FlatList, } from "native-base"; import { Dimensions, Image, Animated, ListView, PixelRatio, StyleSheet, ScrollView, Text, View, TextInput, TouchableOpacity, Modal, LayoutAnimation, Platform, RefreshControl, TouchableWithoutFeedback } from "react-native" import Echarts from 'native-echarts'; var deviceHeight = Dimensions.get('window').height; var deviceWidth = Dimensions.get('window').width; import common from '../../../widgets/common'; import LoadingModal from '../../../widgets/loading'; const isIOS = Platform.OS == "ios" const { width, height } = Dimensions.get('window') const headH = 140 const InputHeight = 28 const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); class FServer extends Component { static navigationOptions = { header: null }; constructor(props) { super(props); this.state = { scrollY: new Animated.Value(0), searchView: new Animated.Value(0), modalVisible: false, searchBtnShow: true, listLoading: false, isRefreshing: false }; //第一个透明度的变化 this.SEARCH_BOX_Y = 48 this.SEARCH_FIX_Y = headH-64 this.SEARCH_KEY_P = 58 this.SEARCH_DIFF_Y = this.SEARCH_FIX_Y-this.SEARCH_BOX_Y } _onRefresh(){ this.setState({isRefreshing: true}); setTimeout(() => { this.setState({isRefreshing: false}); }, 2000) } _renderHeader(){ let lbsOpaticy = this.state.scrollY.interpolate({ inputRange: [0, this.SEARCH_BOX_Y], outputRange: [1, 0] }) let searchY = this.state.scrollY.interpolate({ inputRange: [0, this.SEARCH_BOX_Y, this.SEARCH_FIX_Y, this.SEARCH_FIX_Y], outputRange: [0, 0, this.SEARCH_DIFF_Y, this.SEARCH_DIFF_Y] }) let keyOpaticy = this.state.scrollY.interpolate({ inputRange: [0, this.SEARCH_BOX_Y, this.SEARCH_KEY_P], outputRange: [1, 1, 0] }) return ( <View style={styles.header}> <Animated.View style={[styles.lbsWeather, {opacity: lbsOpaticy,}]}> <View style={styles.lbs}> <Text style={{fontSize: 18, fontWeight: 'bold', color:"#fff", paddingHorizontal: 5}}>太平洋企业中心</Text> </View> <View style={styles.weather}> <View style={{marginRight: 5}}> <Text style={{color: "#fff", fontSize: 11, textAlign: "center"}}>{"3°"}</Text> <Text style={{color: "#fff", fontSize:11}}>{"阵雨"}</Text> </View> </View> </Animated.View> <Animated.View style={{ marginTop:15, transform: [{ translateY: searchY }] }}> <View style={[styles.searchBtn, {backgroundColor: "#fff"}]}> <Text style={{fontSize: 13, color:"#666", marginLeft: 5}}>{"输入商家,商品名称"}</Text> </View> </Animated.View> <Animated.View style={[styles.keywords, {opacity: keyOpaticy}]}> { ['肯德基','烤肉','吉野家','粥','必胜客','一品生煎','星巴克'].map((item, i) => { return ( <TouchableWithoutFeedback key={i}> <View style={{marginRight: 12}}> <Text style={{fontSize: 12, color:"#fff"}}>{item}</Text> </View> </TouchableWithoutFeedback> ) }) } </Animated.View> </View> ) } _renderFixHeader(){ let showY = this.state.scrollY.interpolate({ inputRange: [0, this.SEARCH_BOX_Y, this.SEARCH_FIX_Y, this.SEARCH_FIX_Y,this.SEARCH_FIX_Y], outputRange: [-9999, -9999, 0, 0,0] }) return ( <Animated.View style={[styles.header, { position: "absolute", left: 0, right: 0, top: 0, bottom:0, height: 64, paddingTop: 25, transform: [ {translateY: showY} ] }]}> <TouchableWithoutFeedback onPress={()=>{}}> <View style={[styles.searchBtn, {backgroundColor: "#fff"}]}> <Text style={{fontSize: 13, color:"#666", marginLeft: 5}}>{"输入商家,商品名称"}</Text> </View> </TouchableWithoutFeedback> </Animated.View> ) } render() { return ( <View style={{backgroundColor:'#fff'}}> <ScrollView onScroll={Animated.event( [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}] )} scrollEventThrottle={16} refreshControl={ <RefreshControl refreshing={this.state.isRefreshing} onRefresh={this._onRefresh.bind(this)} tintColor="#0398ff" title="拼命加载中..." /> } > {this._renderHeader()} <View style={{height:1000}}> </View> </ScrollView> {this._renderFixHeader()} </View> ); } } const styles = StyleSheet.create({ header: { backgroundColor: "#0398ff", height: headH, paddingTop: 30, paddingHorizontal: 16 }, typesView: { paddingBottom: 10, flex: 1, backgroundColor: "#fff", flexDirection: "row", flexWrap: "wrap" }, typesItem: { backgroundColor: "#fff", justifyContent: "center", alignItems: "center" }, lbsWeather: { height: InputHeight, overflow: "hidden", flexDirection: "row", justifyContent: "space-between" }, placeholder: { height: InputHeight, position: "absolute", left: 0, top: 0, right: 0, borderRadius: 14, backgroundColor: "#fff", alignItems: "center" }, lbs: { flexDirection: "row", justifyContent: "center", alignItems: "center" }, weather: { flexDirection: "row", alignItems: "center" }, textInput:{ flex: 1, fontSize: 13, paddingLeft: 10, paddingRight: 10, height: InputHeight, borderRadius: 14, backgroundColor: "#fff" }, searchHeadBox: { height: InputHeight, flexDirection: "row", alignItems: "center" }, searchBtn: { borderRadius: InputHeight, height: InputHeight, flexDirection: "row", backgroundColor: "#fff", justifyContent: "center", alignItems: "center" }, keywords: { marginTop: 14, flexDirection: "row" }, recom: { flexDirection: "row", backgroundColor: "#fff", marginTop: 10, flexWrap: "wrap" }, card: { backgroundColor: "#fff", marginTop: 10, paddingHorizontal: 16, paddingVertical: 16 }, business: { backgroundColor: "#fff", marginTop: 10, paddingVertical: 16 }, time: { paddingHorizontal: 3, backgroundColor: "#333", fontSize: 11, color: "#fff", marginHorizontal: 3 }, recomItem: { width: width/2, height: 70, backgroundColor: "#fff", alignItems: "center", flexDirection: "row" }, recomWrap: { flex: 1, height: 70, paddingHorizontal: 16, backgroundColor: "#fff", flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, lTimeScrollView: { }, lTimeList: { backgroundColor:"#fff", alignItems: "center" }, qtag: { fontSize: 12, borderWidth: 1, color: "#00abff", borderColor: "#00abff", paddingHorizontal: 4, paddingVertical: 3, borderRadius: 5 }, gift: { flex: 1, justifyContent: "space-between", alignItems: "center", flexDirection: "row", backgroundColor: "#fff" }, fixSearch: { backgroundColor: "#0398ff", height: isIOS ? 64 : 42, paddingTop: isIOS ? 20 : 0, paddingHorizontal: 16, position: "absolute", left: 0, right: 0, top: 0 } }) export default FServer;
饿了么购物车动画(代码片段)
前言之前用饿了么印象最深刻的是联动菜单和小球飞入购物车动画,所以想看看别人是怎么实现的,但是看了很多仿饿了么的demo都是实现了一个完整的大的项目,要找到那个小模块很麻烦,所以自己将联动菜单和动画提取出来... 查看详情
饿了么ui下拉框禁用
1饿了么ui下拉框可以禁用。2通常可以通过设置下拉框的属性或者使用JavaScript代码来禁用下拉框。禁用下拉框可以防止用户进行选择或者输入操作,可以用于一些特定的场景,比如下拉框的值需要根据其他条件进行计算或者筛选... 查看详情
支付宝饿了吗怎么删除订单(支付宝饿了吗怎么删除历史订单怎么删除)
支付宝饿了么里的订单是可以删除的,具体操作如下:演示所用支付宝版本为10.2.961、打开支付宝以后,点开上方的搜索框。2、在输入框输入“饿了么”,等待自动搜索结束后,点击“饿了么”。3、点击打开小程序“饿了么”... 查看详情
饿了么android版下拉筛选效果是如何实现的呢
参考技术A对两个按钮的背景进行改变button、button2的选中和为选择状态.beijing1).drawable.setBackgroundResource(R,让后再button1和button2的点击事件中,分别为button1的选中和为选择状态;上面是改变按钮背景的代码可以做两组图片 查看详情
【css动画】饿了么加入购物车抛物线动画实现
...候,将商品加入购物车时会有一个很炫酷的动画,如下图饿了么点餐动画:所以百度了一下前端使用css实现这个效果,然后就自己就照葫芦画瓢的写了一个小小的demo,完全当作学习了一把。在界面上,我是参考了图片上的界面... 查看详情
css贝塞尔曲线模仿饿了么购物车小球动画
在线观看贝塞尔曲线值:传送门在线观看动画效果:传送门代码:<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>JSBin</title><style> 查看详情
仿饿了么购物车下单效果
仿饿了么购物车下单效果前一段由于新项目需要,开发一个类似饿了么购物车下单效果,电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。效果图如下:主要的功能:就是左侧展示分类,右侧展示分类下商品的,... 查看详情
android仿饿了么购物车
from: http://blog.csdn.net/jdsjlzx/article/details/47311749这次分享的是一个很常见的效果,凡是涉及到购物的app或者旅游类以及订餐类的app都有看到过这种效果,两个listview联动显示,添加购物车时的一个抛物线动画实现,... 查看详情
仿饿了么加入购物车旋转控件-自带闪转腾挪动画的按钮
转载请标明出处:http://blog.csdn.net/zxt0601/article/details/54235736本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)代码传送门:喜欢的话,随手点个star。多谢https://github.com/mcxtzhang/AnimShopButton概述在上文,酷炫Path动画已经预告了,今... 查看详情
饿了么商家版登录显示开店信息
...是自动显示的。开店步骤如下:1、在软件商店里搜索“饿了么商家版”,然后点击“安装”。2、进入饿了么商家版点击右上角的“我要开店”。3、这时需注意查看要准备的资料,如果确保自己都已经准备好后则点击下面“准备... 查看详情
这种情况怎么办,饿了么app跳出来的框都不在原来的位置
参考技术A直接百度浏览器或搜狗搜索饿了么送餐员app网页上扫码下载如果是苹果手机直接在appstore上面下载或者在iTunes上面搜索名字下就可以了。安卓手机去应用商店搜索名字下载,比如百度手机助手,豌豆荚等。 查看详情
饿了么商家名字怎么加后缀
参考技术A饿了么美团店加特符号,就是有你起名时约符号,直接按复制,复制后在游戏里改名添加,按你约爱好设就... 参考技术B饿了么美团店加特符号,就是有你起名时约符号,直接按复制,复制后在游戏里改名添加,按你约... 查看详情
仿饿了么首页导航栏(viewpager)
1、需求分析在饿了么首页中我们能看到这样的布局(如下图)。红框内是一个可以左右滑动的页面,每一个页面类似于九宫格,都有可供点击图标。对于这样的布局,我在网上找了很久都没有找到相关的名称,所以我这里暂时... 查看详情
饿了么账户异常怎么解决?
饿了么账户异常有以下几种解决方法:先退出登录,然后在登录试试。一般来说账号在其他地方登录次数过多才会这样。2.不行的话可以用账号申诉,看看自己账号有没有被盗用。3.设置好密保问题,保护好自己账号。也有肯能... 查看详情
饿了么店铺显示筛选类目无结果
...下是否在自己的营业时段内,如果依然搜索不到,可以像饿了么客服反映情况,或者换一个手机试试。 查看详情
基本特效:饿了么丝滑无缝过度搜索栏的实现
新年好,首先给大家发个红包。[意念红包]请闭上眼睛通过念力领取。这都2017年了,是时候来一波基础特效教程了!如果我不偷懒的话,或许可以成为一个系列都基础教程哦。当然如果成为了一个系列,这个... 查看详情
这交互炸了:饿了么是怎么让image变成详情页的
晚上叫外卖,打开饿了么,发现推了一个版本,更新以后,点开了个鸡腿,哇,交互炫炸了。不过还是有槽点。我是无意中才发现可以左右滑动的。这。。。你不告诉我,我怎么知道左右可以滑。https://github.com/githubwing/ZoomHeader... 查看详情
关于vue中input输入后出现下拉框出现提示的小技巧
...于百度,谷歌那种输入后出现下拉提示框?由于我用的是饿了么开发的element-ui前端开发框架,所以可以用element-ui的input组件中的el-autocompletehttp://element-cn.eleme.io/#/zh-CN/component/input这是例子的中算法。其实很简单,就是indexOf的简... 查看详情